Slider
A neo-brutalist style slider built on top of reka-ui's Slider primitive, with v-model support.
Demo
基础用法
值：60
自定义范围 (min=0, max=200, step=10)
值：25
颜色变体 (variant=primary)
值：50
禁用状态
垂直方向
值：50
刻度标记
值：50
拖拽提示
值：50
Installation
pnpm dlx brutx-vue@latest add sliderUsage
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const value = ref([50])
</script>
<template>
<Slider v-model="value" :max="100" :step="1" />
</template>Range Slider
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const range = ref([25, 75])
</script>
<template>
<Slider v-model="range" :max="100" :step="1" />
</template>With Min/Max
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const value = ref([500])
</script>
<template>
<Slider v-model="value" :min="0" :max="1000" :step="50" />
</template>Disabled State
<template>
<Slider v-model="value" disabled />
</template>Orientation
Use the orientation prop to switch between horizontal (horizontal) or vertical (vertical) layout. This prop is passed through to the reka-ui primitive. Vertical mode requires a height to be set on the container.
<template>
<div class="h-48">
<Slider v-model="value" orientation="vertical" />
</div>
</template>Tick Marks
Pass a numeric array to the marks prop to render tick marks at the corresponding positions on the track.
<template>
<Slider v-model="value" :marks="[0, 25, 50, 75, 100]" />
</template>Tooltip on Drag
Enable showTooltip to display the current value near the thumb when dragging or hovering.
<template>
<Slider v-model="value" show-tooltip />
</template>API Reference
| Name | Type | Default | Description |
|---|---|---|---|
modelValue | number[] | undefined | undefined | The current slider values. One value renders a single thumb; two values create a range slider. Supports controlled v-model. |
DetailsDeclared typenumber[] | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
min | number | undefined | 0 | The minimum value and the fallback value when the model array is empty. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
max | number | undefined | 100 | The maximum permitted value. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
step | number | undefined | 1 | The increment used when adjusting the value by keyboard or pointer. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
disabled | boolean | undefined | false | Disables interaction with all slider thumbs. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
ariaLabel | string | undefined | undefined | The accessible name passed to the slider primitive. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
ariaLabelledby | string | undefined | undefined | External element IDs that name the focusable thumb. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
ariaDescribedby | string | undefined | undefined | Thumb description IDs, combined with the built-in tooltip description. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
getValueText | ((value: number, index: number) => string) | undefined | undefined | Callback function that generates aria-valuetext for each thumb. |
DetailsDeclared type((value: number, index: number) => string) | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | Sets the size preset for the track and thumb. |
DetailsDeclared typeNonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
variant | "accent" | "default" | "primary" | "secondary" | "success" | undefined | "default" | Sets the color variant for the range fill and thumb. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "success" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
orientation | "horizontal" | "vertical" | undefined | "horizontal" | Selects horizontal or vertical layout and positions marks and tooltips accordingly. |
DetailsDeclared typeNonNullable<"vertical" | "horizontal" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
marks | number[] | undefined | undefined | Values at which tick marks are drawn along the track. |
DetailsDeclared typenumber[] | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
showTooltip | boolean | undefined | false | Shows the value tooltip beside the currently focused or hovered thumb. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
class | string | undefined | undefined | CSS classes added to the slider root container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/slider/Slider.vue | |||
| Name | Signature or type | Description |
|---|---|---|
@update:modelValue | [value: number[]] | Emits the updated number array when the slider changes; a controlled value is applied when the parent updates modelValue. |
DetailsDeclared type[value: number[]] Sourcepackages/ui/src/components/slider/Slider.vue | ||
| Name | Signature or type | Description |
|---|---|---|
currentValue | number[] | The computed array of effective slider values. It is read-only and contains min when the model is omitted or empty. |
DetailsDeclared typenumber[] Sourcepackages/ui/src/components/slider/Slider.vue | ||
setValue | (value: number[]) => void | Requests a new slider value array from the parent by emitting update:modelValue. |
DetailsDeclared type(value: number[]) => void Sourcepackages/ui/src/components/slider/Slider.vue | ||
Accessibility
- Keyboard: Supports arrow keys to adjust the value,
Home/Endto jump to min/max - ARIA Attributes: Automatically manages
aria-valuemin,aria-valuemax,aria-valuenow,aria-orientation, etc. - Focus Management: The slider can be focused via the Tab key
Exposed Methods (defineExpose)
Use a component ref to call setValue and request a new slider value from the parent:
<script setup>
import { ref } from 'vue'
import { Slider } from 'brutx-ui-vue'
const sliderRef = ref(null)
const value = ref([50])
function resetToCenter() {
sliderRef.value?.setValue([50])
}
</script>
<template>
<Slider ref="sliderRef" v-model="value" />
<button @click="resetToCenter">Reset</button>
</template>