Slider · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSlider } from '@juxtui/ui'

Usage #

<JSlider v-model="volume" label="Volume" />

Bind an array of two numbers instead of a single number to get a range slider with two thumbs — each thumb is clamped so it can never cross the other.

Dragging the track itself jumps the nearest thumb to the pointer, then keeps dragging it.

Variants & examples #

Range#

Bind a [low, high] tuple. format controls the bubble and the announced value.

$20$80

<script setup lang="ts">
const price = ref<[number, number]>([20, 80])
</script>

<template>
  <JSlider v-model="price" label="Price range" show-value :format="(v) => `$${v}`" />
</template>

Min, max and step#

<script setup lang="ts">
const rating = ref(3)
</script>

<template>
  <JSlider v-model="rating" label="Rating" :min="1" :max="5" :step="1" show-value size="sm" />
</template>

Disabled#

<script setup lang="ts">
const value = ref(60)
</script>

<template>
  <JSlider v-model="value" label="Volume" disabled />
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`number \| [number, number]`	`0`	Bound with `v-model`. A tuple renders a two-thumb range slider.
min	`number`	`0`	Minimum value.
max	`number`	`100`	Maximum value.
step	`number`	`1`	Increment for dragging, arrow keys and clamping.
disabled	`boolean`	`false`	Disables dragging and keyboard input.
label	`string`	—	Accessible name for the thumb(s), when there is no visible label near the slider.
size	`'sm' \| 'md'`	`'md'`	Track and thumb size.
showValue	`boolean`	`false`	Show the current value in a floating bubble above the active thumb.
format	`(value: number) => string`	—	Formats the displayed and announced value, e.g. as currency or a unit.

Events

Event	Payload	Description
update:modelValue	`number \| [number, number]`	Emitted while dragging and on keyboard changes.

Accessibility #

Each thumb is role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext built from format, so a screen reader announces the same text sighted users see in the bubble.
A range slider’s two thumbs are independently focusable and independently clamped, so one can never be dragged or arrowed past the other.
Provide label, or associate a visible label yourself — the slider has no visible text of its own to fall back on.

Keyboard #

Key	Action
`→↑`	Increase the focused thumb’s value by `step`.
`←↓`	Decrease the focused thumb’s value by `step`.
`PageUp`	Increase by ten steps (or a tenth of the range).
`PageDown`	Decrease by ten steps (or a tenth of the range).
`Home`	Jump the focused thumb to `min` (clamped by the other thumb, in a range).
`End`	Jump the focused thumb to `max` (clamped by the other thumb, in a range).