Slider

Default

Bind a number with v-model between min and max.

Code copied

<template>
  <s-slider v-model="val" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const val = ref(30)
</script>

Color

Color the track and thumb to match your theme.

Code copied

<template>
  <div class="center">
    <s-slider v-model="a" color="primary" />
    <s-slider v-model="b" color="success" />
    <s-slider v-model="c" color="danger" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const a = ref(20)
const b = ref(40)
const c = ref(60)
</script>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Ticks

Display step ticks along the track.

Code copied

<template>
  <s-slider v-model="val" ticks :step="10" />
</template>

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

Text Fixed

Append a suffix such as % next to the current value.

Code copied

<template>
  <s-slider v-model="val" text-fixed="%" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const val = ref(25)
</script>

API