Slider
Numeric range input with thumb control.
Generated from the package's public source.
API
Rangecomponent
@solidiom/slider — Headless slider primitive. Parts: Root, Track, Range, Thumb. Supports multiple thumbs, keyboard/pointer interaction, horizontal/vertical orientation.
Range(props: SliderRangeProps): Element
Props
index?number— Index of thumb this range represents (for multi-thumb). Defaults to 0.
Rootcomponent
@solidiom/slider — Headless slider primitive. Parts: Root, Track, Range, Thumb. Supports multiple thumbs, keyboard/pointer interaction, horizontal/vertical orientation.
Root(props: SliderRootProps): Element
Props
class?string— CSS class.defaultValue?number[]— Default value(s) for uncontrolled mode.disabled?boolean— Whether the slider is disabled.max?number— Maximum value. Defaults to 100.min?number— Minimum value. Defaults to 0.onValueChange?(values: number[]) => void— Callback when any thumb value changes.orientation?SliderOrientation— Orientation. Defaults to "horizontal".step?number— Step increment. Defaults to 1.value?Accessor<number[] | undefined>— Controlled value(s). Single number or array for multiple thumbs.
children: Element
SliderContextValueinterface
Context shape shared among all slider parts.
Props
disabledAccessor<boolean>— Whether the slider is disabled.getPercentage(value: number) => number— Get the percentage position for a given value.maxnumber— Maximum allowed value.minnumber— Minimum allowed value.orientationSliderOrientation— Slider orientation.requestValueChange(index: number, next: number, reason: "drag" | "keyboard") => void— Request value change for a thumb at the given index.setTrackRef(el: HTMLElement | undefined) => void— Set the track element reference.stepnumber— Step increment.trackRefAccessor<HTMLElement | undefined>— Reference to the track element for pointer calculations.valuesAccessor<number[]>— Array of current thumb values.
SliderOrientationtype
Orientation of the slider.
SliderRangePropsinterface
Props for the Slider Range (fill) component.
Props
index?number— Index of thumb this range represents (for multi-thumb). Defaults to 0.
SliderRootPropsinterface
Props for the Slider Root component.
Props
class?string— CSS class.defaultValue?number[]— Default value(s) for uncontrolled mode.disabled?boolean— Whether the slider is disabled.max?number— Maximum value. Defaults to 100.min?number— Minimum value. Defaults to 0.onValueChange?(values: number[]) => void— Callback when any thumb value changes.orientation?SliderOrientation— Orientation. Defaults to "horizontal".step?number— Step increment. Defaults to 1.value?Accessor<number[] | undefined>— Controlled value(s). Single number or array for multiple thumbs.
children: Element
SliderThumbPropsinterface
Props for the Slider Thumb component.
Props
aria-label?string— Optional aria-label for the thumb.index?number— Index of this thumb (for multiple thumbs). Defaults to 0.
children: Element
SliderTrackPropsinterface
Props for the Slider Track component.
Props
onPointerDown?(event: PointerEvent) => void— Optional pointer-down handler from consumer.
children: Element
Thumbcomponent
@solidiom/slider — Headless slider primitive. Parts: Root, Track, Range, Thumb. Supports multiple thumbs, keyboard/pointer interaction, horizontal/vertical orientation.
Thumb(props: SliderThumbProps): Element
Props
aria-label?string— Optional aria-label for the thumb.index?number— Index of this thumb (for multiple thumbs). Defaults to 0.
children: Element
Trackcomponent
@solidiom/slider — Headless slider primitive. Parts: Root, Track, Range, Thumb. Supports multiple thumbs, keyboard/pointer interaction, horizontal/vertical orientation.
Track(props: SliderTrackProps): Element
Props
onPointerDown?(event: PointerEvent) => void— Optional pointer-down handler from consumer.
children: Element
useSliderContextcontext
useSliderContext(): SliderContextValue