Slider

import { createSignal } from 'solid-js';
import { Slider, SliderRange, SliderThumb, SliderTrack } from '@tile-ui/solid';

function DemoSlider(props: { orientation: 'horizontal' | 'vertical'; value: number; onValueChange: (value: number) => void }) {
	return (
		<Slider

Use Slider for pointer and keyboard selection along horizontal or vertical ranges.

Registry install

pnpm dlx shadcn@latest add @tile-ui/slider

Package usage

import { Slider, SliderTrack, SliderRange, SliderThumb } from '@tile-ui/solid';

<Slider defaultValue={40}><SliderTrack><SliderRange /></SliderTrack><SliderThumb aria-label="Volume" /></Slider>

Highlights

• Min, max, and step
• Horizontal and vertical
• Track, range, and thumb

Registry dependencies

Item	Purpose
slider	Component source and module styles
core	Framework-agnostic logic helpers
utils	Shared utility helpers
styles	Shared SCSS tokens and globals

API reference

Slider

Prop	Type	Default
orientation	'horizontal' | 'vertical'	—
min	number	—
max	number	—
step	number	—
value	number	—
defaultValue	number	—
onValueChange	(value: number) => void	—
disabled	boolean	—
name	string	—
form	string	—

SliderTrack

No custom props.

SliderRange

No custom props.

SliderThumb

No custom props.

Related docs

• Progress
• Switch
• Form