Tui

<template>
  <div class="slider-component-card-demo-column">
    <div class="slider-item-wrap">
      <div class="label">Default Value</div>
      <TsSlider v-model="sliderValueBasic" />
    </div>
    <div class="slider-item-wrap">
      <div class="label">No Ball Value</div>
      <TsSlider v-model="sliderValueBall" :ball="false" />
    </div>
    <div class="slider-item-wrap">
      <div class="label">Disabled Value</div>
      <TsSlider v-model="sliderValueDisabled" disabled />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const sliderValueBasic = ref(20);
const sliderValueBall = ref(40);
const sliderValueDisabled = ref(50);
</script>

<style scoped>
.slider-component-card-demo-column {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding-bottom: 24px;
}

.slider-component-card-demo-column .slider-item-wrap {
  display: flex;
  column-gap: 18px;
  align-items: center;
}

.slider-component-card-demo-column .slider-item-wrap .label {
  white-space: nowrap;
  width: 120px;
}
</style>

<template>
  <div class="slider-vertical-wrap">
    <TsSlider v-model="sliderValueVertical" vertical />
    <div class="slider-value-text">当前值：{{ sliderValueVertical }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const sliderValueVertical = ref(50);
</script>

<style scoped>
.slider-vertical-wrap {
  height: 120px;
  display: flex;
  column-gap: 20px;
  align-items: center;
}
</style>

<template>
  <div class="range-demo-wrap">
    <TsSlider v-model="sliderValueRange" :min="10" :max="80" :range="[20, 50]" fillBg="#ff971b" />
    <div class="slider-value-text">范围选择：{{ sliderValueRange }}</div>

    <TsSlider v-model="sliderValueRadius" :min="10" :max="80" trackBg="rgba(255, 151, 27, 0.25)" fillBg="#ff971b" :radius="2" />
    <div class="slider-value-text">radius + trackBg：{{ sliderValueRadius }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const sliderValueRange = ref([30, 40]);
const sliderValueRadius = ref(30);
</script>

<style scoped>
.range-demo-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.slider-value-text {
  font-size: 14px;
  color: var(--ts-color-text);
}
</style>

<template>
  <div class="step-tooltip-demo">
    <TsSlider
      v-model="singleValue"
      :min="0"
      :max="10"
      :decimals="1"
      :step="0.1"
      :ball-tooltip="{
        effect: 'dark',
        formatter: (value) => `${value.toFixed(1)}`,
      }"
    />
    <div class="slider-value-text">单值：step=0.1，当前值 {{ singleValue.toFixed(1) }}</div>

    <TsSlider
      v-model="rangeValue"
      :min="0"
      :max="10"
      :range="[2, 8]"
      :decimals="1"
      :step="0.2"
      fillBg="#13c2c2"
      :ball-tooltip="{
        effect: 'light',
        formatter: (value, index) => `${index === 0 ? '起' : '止'}：${value.toFixed(1)}`,
      }"
    />
    <div class="slider-value-text">范围：step=0.2，当前值 {{ rangeValue[0].toFixed(1) }} / {{ rangeValue[1].toFixed(1) }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const singleValue = ref(5.1);
const rangeValue = ref<[number, number]>([2.4, 7.6]);
</script>

<style scoped>
.step-tooltip-demo {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.slider-value-text {
  font-size: 14px;
  color: var(--ts-color-text);
}
</style>

<template>
  <TsSlider v-model="sliderValue" @hover-change="handleHover" />
  <div class="slider-value-text">当前值：{{ sliderValue }}</div>
  <div class="slider-value-text">hover 值：{{ hoverValue }}</div>
  <div class="slider-value-text">hover 百分比：{{ hoverPercent }}%</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const sliderValue = ref(30);
const hoverValue = ref(30);
const hoverPercent = ref(30);

const handleHover = (payload: { percentage: number; value: number }) => {
  hoverValue.value = payload.value;
  hoverPercent.value = payload.percentage;
};
</script>

<style scoped>
.slider-value-text {
  font-size: 14px;
  color: var(--ts-color-text);
  margin-top: 10px;
}
</style>