Usage
Use the v-model directive to control the value of the Slider.
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<PSlider v-model="value" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(50)
</script>
<template>
<PSlider v-model="value" />
</template>Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PSlider :default-value="50" />
</template>Use
aria-label or aria-labelledby to name a single thumb Slider, they are forwarded to the thumb which is the element with the slider role.The thumbs of a multiple thumbs Slider are named by their position so they can be told apart, Minimum / Maximum for two thumbs and Value n of m for three or more. Those names are kept, and an aria-label names the Slider as a whole through a group role on the root instead of being repeated on every thumb.Min / Max
Use the min and max props to set the minimum and maximum values of the Slider. Defaults to 0 and 100.
<template>
<PSlider :min="0" :max="50" :default-value="50" />
</template>Step
Use the step prop to set the increment value of the Slider. Defaults to 1.
<template>
<PSlider :step="10" :default-value="50" />
</template>Multiple
Use the v-model directive or the default-value prop with an array of values to create a range Slider.
<script setup lang="ts">
const value = ref([
25,
75
])
</script>
<template>
<PSlider v-model="value" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref([
25,
75
])
</script>
<template>
<PSlider v-model="value" />
</template>Use the min-steps-between-thumbs prop to limit the minimum distance between the thumbs.
<script setup lang="ts">
const value = ref([
25,
50,
75
])
</script>
<template>
<PSlider v-model="value" :min-steps-between-thumbs="10" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref([
25,
50,
75
])
</script>
<template>
<PSlider v-model="value" :min-steps-between-thumbs="10" />
</template>Orientation
Use the orientation prop to change the orientation of the Slider. Defaults to horizontal.
<template>
<PSlider orientation="vertical" :default-value="50" class="h-48" />
</template>Color
Use the color prop to change the color of the Slider.
<template>
<PSlider color="neutral" :default-value="50" />
</template>Size
Use the size prop to change the size of the Slider.
<template>
<PSlider size="xl" :default-value="50" />
</template>Tooltip
Use the tooltip prop to display a Tooltip around the Slider thumbs with the current value. You can set it to true for default behavior or pass an object to customize it with any property from the Tooltip component.
<template>
<PSlider :default-value="50" tooltip />
</template>Disabled
Use the disabled prop to disable the Slider.
<template>
<PSlider disabled :default-value="50" />
</template>Inverted
Use the inverted prop to visually invert the Slider.
<template>
<PSlider inverted :default-value="25" />
</template>API
Props
| Prop | Default | Type |
|---|
Emits
| Event | Type |
|---|
Theme
app.config.ts
export default defineAppConfig({
ui: {
slider: {
slots: {
root: 'relative flex items-center select-none touch-none',
track: 'relative bg-background-accented overflow-hidden rounded-full grow',
range: 'absolute rounded-full',
thumb: 'rounded-full bg-background ring-2 focus-visible:outline-3 focus-visible:outline-offset-2'
},
variants: {
color: {
primary: {
range: 'bg-primary',
thumb: 'ring-primary outline-primary/25'
},
secondary: {
range: 'bg-secondary',
thumb: 'ring-secondary outline-secondary/25'
},
success: {
range: 'bg-success',
thumb: 'ring-success outline-success/25'
},
info: {
range: 'bg-info',
thumb: 'ring-info outline-info/25'
},
warning: {
range: 'bg-warning',
thumb: 'ring-warning outline-warning/25'
},
error: {
range: 'bg-error',
thumb: 'ring-error outline-error/25'
},
neutral: {
range: 'bg-background-inverted',
thumb: 'ring-border-inverted outline-border-inverted/25'
}
},
size: {
xs: {
thumb: 'size-3'
},
sm: {
thumb: 'size-3.5'
},
md: {
thumb: 'size-4'
},
lg: {
thumb: 'size-4.5'
},
xl: {
thumb: 'size-5'
}
},
orientation: {
horizontal: {
root: 'w-full',
range: 'h-full'
},
vertical: {
root: 'flex-col h-full',
range: 'w-full'
}
},
disabled: {
true: {
root: 'opacity-75 cursor-not-allowed'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
track: 'h-[6px]'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
track: 'h-[7px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
track: 'h-[8px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
track: 'h-[9px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
track: 'h-[10px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
track: 'w-[6px]'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
track: 'w-[7px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
track: 'w-[8px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
track: 'w-[9px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
track: 'w-[10px]'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
slider: {
slots: {
root: 'relative flex items-center select-none touch-none',
track: 'relative bg-background-accented overflow-hidden rounded-full grow',
range: 'absolute rounded-full',
thumb: 'rounded-full bg-background ring-2 focus-visible:outline-3 focus-visible:outline-offset-2'
},
variants: {
color: {
primary: {
range: 'bg-primary',
thumb: 'ring-primary outline-primary/25'
},
secondary: {
range: 'bg-secondary',
thumb: 'ring-secondary outline-secondary/25'
},
success: {
range: 'bg-success',
thumb: 'ring-success outline-success/25'
},
info: {
range: 'bg-info',
thumb: 'ring-info outline-info/25'
},
warning: {
range: 'bg-warning',
thumb: 'ring-warning outline-warning/25'
},
error: {
range: 'bg-error',
thumb: 'ring-error outline-error/25'
},
neutral: {
range: 'bg-background-inverted',
thumb: 'ring-border-inverted outline-border-inverted/25'
}
},
size: {
xs: {
thumb: 'size-3'
},
sm: {
thumb: 'size-3.5'
},
md: {
thumb: 'size-4'
},
lg: {
thumb: 'size-4.5'
},
xl: {
thumb: 'size-5'
}
},
orientation: {
horizontal: {
root: 'w-full',
range: 'h-full'
},
vertical: {
root: 'flex-col h-full',
range: 'w-full'
}
},
disabled: {
true: {
root: 'opacity-75 cursor-not-allowed'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
track: 'h-[6px]'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
track: 'h-[7px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
track: 'h-[8px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
track: 'h-[9px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
track: 'h-[10px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
track: 'w-[6px]'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
track: 'w-[7px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
track: 'w-[8px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
track: 'w-[9px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
track: 'w-[10px]'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary'
}
}
}
})
]
})Changelog
No recent changes