Slider

Basic slider example demonstrating core behavior.

Package: @solidiom/slider
Version: 0.0.1-next.0
Status: stable

Examples

import * as Slider from "@solidiom/slider"

;<Slider.Root defaultValue={[50]} min={0} max={100} step={1}>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb index={0} aria-label="Volume" />
  </Slider.Track>
</Slider.Root>

Range slider

;<Slider.Root defaultValue={[25, 75]} min={0} max={100} step={1}>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb index={0} aria-label="Minimum value" />
    <Slider.Thumb index={1} aria-label="Maximum value" />
  </Slider.Track>
</Slider.Root>

Each thumb is identified by its index in the value array. The Range fills between the minimum and maximum thumb positions. Use the orientation prop for vertical layout.

View source

        /**
 * @solidiom/slider — Headless slider primitive.
 *
 * Parts: Root, Track, Range, Thumb.
 * Supports multiple thumbs, keyboard/pointer interaction, horizontal/vertical orientation.
 *
 * @example
 * ```tsx
 * import * as Slider from "@solidiom/slider"
 *
 * <Slider.Root defaultValue={[50]} min={0} max={100} step={1}>
 *   <Slider.Track>
 *     <Slider.Range />
 *     <Slider.Thumb index={0} aria-label="Volume" />
 *   </Slider.Track>
 * </Slider.Root>
 * ```
 */

export { Root, Track, Range, Thumb } from "./slider"
export type {
  SliderRootProps,
  SliderTrackProps,
  SliderRangeProps,
  SliderThumbProps,
} from "./slider"
export { useSliderContext, type SliderContextValue, type SliderOrientation } from "./slider-context"