@usevyre/react @usevyre/vue

Slider

A range input with a custom visual track, fill, and thumb. Supports controlled / uncontrolled state, two sizes, and full keyboard accessibility via the native <input type="range">.

Controlled & sizes

Value: 40

import { Slider } from "@usevyre/react";

// Uncontrolled
<Slider defaultValue={40} />

// Controlled
const [vol, setVol] = useState(40);
<Slider value={vol} onValueChange={setVol} />

<script setup>
import { Slider } from "@usevyre/vue";
const vol = ref(40);
</script>
<template>
  <!-- Uncontrolled -->
  <Slider :default-value="40" />

  <!-- Controlled -->
  <Slider v-model="vol" />
</template>

Props

Prop	Type	Default	Description
`value`	`number`	`—`	Controlled current value.
`defaultValue`	`number`	`0`	Initial value (uncontrolled).
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step increment.
`disabled`	`boolean`	`false`	Disables interaction.
`size`	`"sm" \| "md"`	`"md"`	Track and thumb size.
`onValueChange`	`(v: number) => void`	`—`	React only. Called when the value changes.
`class`	`string`	`—`	Additional CSS class.

AI Context

Prop	Values	Default
`size`	`"sm"`\|`"md"`	`md`
`disabled`	`true`\|`false`	`false`

← Skeleton Switch →