Slider

Slider wraps a native range input with Windows 98 track, thumb, and optional tick marks.

Props

Prop	Type	Default	Description
`value` / `defaultValue`	`number`	`min`	Controlled or uncontrolled value.
`onValueChange`	`(value: number) => void`	-	Value-level change callback for controlled usage.
`min` / `max` / `step`	input range props	`0` / `100` / `1`	Range bounds and increments.
`vertical`	`boolean`	`false`	Renders a vertical slider.
`boxIndicator`	`boolean`	`false`	Uses the rectangular thumb variant.
`ticks`	`TickMark[]`	-	Adds tick marks and accessible datalist options.

Examples

Range controls

100

import { Slider } from '@murasaki/react98'
import { useState } from 'react'
 
export function SliderBasicDemo(): React.ReactElement {
  const [value, setValue] = useState(45)
 
  return (
    <div className="flex w-72 flex-col gap-6">
      <Slider
        value={value}
        onValueChange={setValue}
        ticks={[{ value: 0, label: '0' }, { value: 50, label: '50' }, { value: 100, label: '100' }]}
      />
      <div className="flex h-40 items-center gap-6">
        <Slider vertical defaultValue={35} />
        <Slider boxIndicator className="w-40" defaultValue={70} />
      </div>
    </div>
  )
}

ARIA

Slider keeps the native input type="range", so keyboard interaction follows browser range behavior.

Keyboard

Arrow keys adjust the value by the configured step. Home and End move to the minimum and maximum in browsers that support native range shortcuts.

SSR

Use the same controlled value on server and client, or prefer defaultValue for uncontrolled sliders.