Slider

A neo-brutalist style slider built on top of reka-ui's Slider primitive, with v-model support.

Demo

Preview

基础用法

值：60

自定义范围 (min=0, max=200, step=10)

值：25

颜色变体 (variant=primary)

值：50

禁用状态

垂直方向

值：50

刻度标记

值：50

拖拽提示

值：50

Installation

pnpm dlx brutx-vue@latest add slider

Usage

<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>

Props

Prop	Type	Default	Description
modelValue	number[]	—	Current value, supports v-model
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
disabled	boolean	false	Whether disabled
ariaLabel	string	—	Accessibility label
size	'sm' | 'default' | 'lg'	'default'	Size
variant	'default' | 'primary' | 'secondary' | 'accent' | 'success'	'default'	Color variant
orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction
marks	number[]	—	Array of tick mark values
showTooltip	boolean	false	Whether to show tooltip on drag
class	string	—	Custom CSS class

Events

Event	Payload	Description
update:modelValue	number[]	Triggered when the value changes

Accessibility

• Keyboard: Supports arrow keys to adjust the value, Home / End to 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)

Property/Method	Type	Description
currentValue	ComputedRef<number[]>	Current slider value (read-only)
setValue	(value: number[]) => void	Set the slider value