Slider

Show a slider element with possibility to grad a single or a range of values.

Examples

Basic slider

Code

<template>
  <Slider v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@/components/ui/slider'

const value = ref(10)
</script>

Vertical slider

Code

<template>
  <div class="h-64">
    <Slider v-model="value" orientation="vertical" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@/components/ui/slider'

const value = ref(10)
</script>

Range slider

Code

<template>
  <Slider v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@/components/ui/slider'

const value = ref([10, 90])
</script>

Slider with a marker

Code

<template>
  <Slider v-model="value" show-marker />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@/components/ui/slider'

const value = ref(10)
</script>

Slider with a custom marker

Code

<template>
  <Slider v-model="value" show-marker>
    <template #marker="{ value }">
      {{ value }}%
    </template>
  </Slider>
</template>
<script setup lang="ts">
import { Slider } from '@/components/ui/slider'
import { ref } from 'vue'

const value = ref(10)
</script>

Slider with a custom step

Code

<template>
  <Slider v-model="value" :step="25" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@/components/ui/slider'

const value = ref(25)
</script>

Disabled slider

Code

<template>
  <Slider v-model="value" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@/components/ui/slider'

const value = ref(10)
</script>