TUI

<template>
  <div class="slider-item-flex-column-wrap">
    <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" :round="false" />
    </div>
    <div class="slider-item-wrap">
      <div class="label">Disabled Value</div>
      <TsSlider v-model="sliderValueDisabled" :disabled="true" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

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

<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>

<template>
  <TsSlider v-model="sliderValueRange" :min="10" :max="80" 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);
</script>