8.9k

Range Slider

PreviousNext

A slider component that supports single value or range selection with optional label and legend.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const singleValue = ref([50])
const rangeValue = ref([25, 75])
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-6">
    <RangeSlider v-model="singleValue" />
    <RangeSlider v-model="rangeValue" variant="range" />
  </div>
</template>

Installation

pnpm dlx @frontic/ui add range-slider

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([50])
</script>

<template>
  <RangeSlider v-model="value" />
</template>

Examples

Default (Single Thumb)

A single-thumb slider for selecting one value.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([50])
</script>

<template>
  <div class="w-full max-w-sm">
    <RangeSlider v-model="value" />
  </div>
</template>

Range (Two Thumbs)

Use variant="range" to enable range selection with two thumbs.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([25, 75])
</script>

<template>
  <div class="w-full max-w-sm">
    <RangeSlider v-model="value" variant="range" />
  </div>
</template>

With Label

Add a label above the slider using the label prop.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([50])
</script>

<template>
  <div class="w-full max-w-sm">
    <RangeSlider v-model="value" label="Volume" />
  </div>
</template>

With Legend

Show min/max values below the slider using show-legend.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([25, 75])
</script>

<template>
  <div class="w-full max-w-sm">
    <RangeSlider v-model="value" variant="range" show-legend />
  </div>
</template>

Custom Range

Configure the min, max, and step values.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([500])
</script>

<template>
  <div class="w-full max-w-sm">
    <RangeSlider
      v-model="value"
      label="Price"
      :min="0"
      :max="1000"
      :step="50"
      show-legend
    />
  </div>
</template>

Disabled

Disable the slider with the disabled prop.

<script setup lang="ts">
import { ref } from 'vue'
import { RangeSlider } from '@/components/ui/range-slider'

const value = ref([50])
</script>

<template>
  <div class="w-full max-w-sm">
    <RangeSlider v-model="value" disabled />
  </div>
</template>
Range CalendarRating