Examples
Basic
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
Read more in Radix Slider Root API.
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
40
[ 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
Adjust the volume
40/50
Read more in Form-group component
Read more in Label component
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
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
60
50
40
30
50
40
75
85
80
50
100
40
30
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 'radix-vue'
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 'radix-vue'
import type { NSliderProps } from '../../types'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
import { computed } from 'vue'
import { cn } from '../../utils'
const props = withDefaults(defineProps<NSliderProps>(), {
slider: 'primary',
})
const emits = defineEmits<SliderRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const isVertical = computed(() => props.orientation === 'vertical')
</script>
<template>
<SliderRoot
: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>