Slider

An input where the user selects a value from within a given range.

Prop	Default	Type	Description
`modelValue`	-	`number`	The controlled value of the slider. Can be bind as `v-model`.
`defaultValue`	`[0]`	`number[]`	The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
`dir`	`ltr`	`string`	The direction of the slider.
`disabled`	`false`	`boolean`	When `true`, prevents the user from interacting with the slider.
`inverted`	`false`	`boolean`	When `true`, the slider will be inverted.
`max`	`100`	`number`	The maximum value of the slider.
`min`	`0`	`number`	The minimum value of the slider.

Preview

Code

Color

Prop	Default	Type	Description
`slider`	`primary`	`string`	Change the color of the slider.

Preview

Code

Dynamic Colors

Static Colors

Steps

Prop	Default	Type	Description
`minStepsBetweenThumbs`	`0`	`number`	The minimum permitted steps between multiple thumbs.
`step`	`1`	`number`	The step value of the slider.

To avoid the thumbs from overlapping, you can set the minStepsBetweenThumbs prop.

Preview

Code

Step size 10

Multiple Values

[ 40, 55, 75 ]

Form Group

You can use the slider component inside the form-group component, or you can use it with the label component.

Preview

Code

Volume

Adjust the volume

40/50

Orientation

Configure the slider orientation by using the orientation prop.

Prop	Default	Type	Description
`orientation`	`horizontal`	`vertical`, `horizontal`	The orientation of the slider.

Preview

Code

Vertical Slider

Horizontal Slider

Size

Adjust the slider size without limits. Use breakpoints (e.g., sm:sm, xs:lg) for responsive sizes or states (e.g., hover:lg, focus:3xl) for state-based sizes.

Prop	Default	Type	Description
`size`	`md`	`string`	Set the slider general size.

Preview

Code

Customization

Configure the progress using the una prop and utility classes.

Preview

Code

Equalizer

100

Slots

Name	Props	Description
`slider-track`	-	The track of the slider.
`slider-thumb`	-	The thumb of the slider.
`slider-range`	-	The range of the slider.

Presets

shortcuts/slider.ts

import type { RuleContext } from '@unocss/core'
import type { Theme } from '@unocss/preset-uno'
import { parseColor } from '@unocss/preset-mini/utils'

type SliderPrefix = 'slider'

export const staticSlider: Record<`${SliderPrefix}-${string}`, string> = {
  // configurations
  'slider-disabled': 'n-disabled',
  'slider-root-vertical': 'flex-col w-1em h-full',
  'slider-track-vertical': 'w-0.5em h-full',
  'slider-range-vertical': 'w-full',
  'slider-thumb-vertical': 'w-1.25em h-1.25em',

  // components
  'slider-root': 'relative flex w-full touch-none select-none items-center',
  'slider-track': 'h-0.5em relative w-full grow overflow-hidden rounded-full bg-muted',
  'slider-range': 'absolute h-full bg-brand',
  'slider-thumb': 'w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:slider-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',

  'slider-accent': 'n-gray-300 dark:n-gray-800',
}

export const dynamicSlider = [
  [/^slider-(.*)$/, ([, body]: string[], { theme }: RuleContext<Theme>) => {
    const color = parseColor(body, theme)
    if ((color?.cssColor?.type === 'rgb' || color?.cssColor?.type === 'rgba') && color.cssColor.components)
      return `n-${body}-600 dark:n-${body}-500`
  }],
]

export const slider = [
  ...dynamicSlider,
  staticSlider,
]

Props

types/slider.ts

import type { SliderRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

type Extensions = SliderRootProps & { class?: HTMLAttributes['class'] }

export interface NSliderProps extends Extensions {
  /**
   * Allows you to add `UnaUI` slider preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/slider.ts
   * @example
   * slider="green""
   */
  slider?: string
  /**
   * Allows you to change the size of the slider.
   *
   * @default base|md
   *
   * @example
   * size="sm" | size="2cm" | size="2rem" | size="2px"
   */
  size?: string
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/slider.ts
   */
  una?: {
    // components
    sliderRoot?: HTMLAttributes['class']
    sliderTrack?: HTMLAttributes['class']
    sliderRange?: HTMLAttributes['class']
    sliderThumb?: HTMLAttributes['class']
  }
}

Components

Slider.vue

<script setup lang="ts">
import type { SliderRootEmits } from 'reka-ui'
import type { NSliderProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NSliderProps>(), {
  slider: 'primary',
})
const emits = defineEmits<SliderRootEmits>()
const rootProps = reactiveOmit(props, ['class', 'una', 'slider', 'una'])
const forwarded = useForwardPropsEmits(rootProps, emits)
const isVertical = computed(() => props.orientation === 'vertical')
</script>

<template>
  <SliderRoot
    v-slot="{ modelValue }"
    :class="cn(
      'slider-root',
      isVertical && 'slider-root-vertical',
      props.class,
      props.una?.sliderRoot,
      disabled && 'slider-disabled',
    )"
    v-bind="forwarded"
    :slider="slider"
  >
    <slot name="slider-track">
      <SliderTrack
        :class="cn(
          'slider-track',
          isVertical && 'slider-track-vertical',
          props.una?.sliderTrack,
        )"
      >
        <slot name="slider-range">
          <SliderRange
            :class="cn(
              'slider-range',
              isVertical && 'slider-range-vertical',
              props.una?.sliderRange,
            )"
          />
        </slot>
      </SliderTrack>
    </slot>

    <slot name="slider-thumb">
      <SliderThumb
        v-for="(_, key) in modelValue"
        :key="key"
        :class="cn(
          'slider-thumb',
          isVertical && 'slider-thumb-vertical',
          props.una?.sliderThumb,
        )"
      />
    </slot>
  </SliderRoot>
</template>