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 Round Value</div>
      <TsSlider v-model="sliderValueBall" />
    </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>
  <TsSlider v-model="sliderMinMaxValue" :min="10" :max="80" bg="#ff971b" />
  <div class="slider-value-text">min:10, max:80, 默认值:30 当前值：{{ sliderMinMaxValue }}</div>
</template>

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

const sliderMinMaxValue = ref(30);
</script>

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

<template>
  <TsSlider v-model="sliderValueRange" :min="10" :max="80" :range="[20, 50]" bg="#ff971b" />
  <div class="slider-value-text">min:10, max:80, 默认值:30 当前值：{{ sliderValueRange }}</div>
</template>

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

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

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

<template>
  <TsSlider v-model="sliderRadiusValue" :min="10" :max="80" bg="#ff971b" :radius="2" />
  <div class="slider-value-text">默认值:30 当前值：{{ sliderRadiusValue }}</div>
</template>

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

const sliderRadiusValue = ref(30);
</script>

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