Slider

A form component that sets values by scrubbing a dial slider handle along a continuous range track.
For more information on this component configuration, visit Radix UI

Vertical Orientation

Set the orientation prop to vertical to change the orientation of the component.

Disabled

Use the disabled attr or the disabled class to disable an item component.

Sizes

Use the slider-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Palette

Use the palette-{color} class to control the component color. Refer to the Colors documentation to see all available color and shade options.

For more information on all available color utilities, visit Tailwind .

Customizing

globals.css


:root {
  --ex-slider-size-sm: calc(var(--spacing) * 0.5);
  --ex-slider-size-md: calc(var(--spacing) * 1);
  --ex-slider-size-lg: calc(var(--spacing) * 1.5);
  --ex-slider-size-xl: calc(var(--spacing) * 2);
 
  --ex-slider-radius-sm: 9999px;
  --ex-slider-radius-md: 9999px;
  --ex-slider-radius-lg: 9999px;
  --ex-slider-radius-xl: 9999px;
 
  --ex-slider-thumb-size-sm: calc(var(--spacing) * 3);
  --ex-slider-thumb-size-md: calc(var(--spacing) * 4);
  --ex-slider-thumb-size-lg: calc(var(--spacing) * 5);
  --ex-slider-thumb-size-xl: calc(var(--spacing) * 6);
 
  --ex-slider-thumb-radius-sm: 9999px;
  --ex-slider-thumb-radius-md: 9999px;
  --ex-slider-thumb-radius-lg: 9999px;
  --ex-slider-thumb-radius-xl: 9999px;
 
  --ex-slider-thumb-shadow-sm: var(--shadow-sm);
  --ex-slider-thumb-shadow-md: var(--shadow-sm);
  --ex-slider-thumb-shadow-lg: var(--shadow-sm);
  --ex-slider-thumb-shadow-xl: var(--shadow-sm);
}

API

For more information on this component configuration, visit Radix UI

Slider

Element	Selector
`Slider`	`.ex-slider`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultValue`	`number[]`
`disabled`	`boolean`	`false`
`max`	`number`
`min`	`number`
`name`	`string`
`orientation`	`enum of ["horizontal", "vertical"]`	`horizontal`
`step`	`number`
`value`	`number[]`
`onValueChange`	`function`
`onValueCommit`	`function`

Slider Track

Element	Selector
`Slider.Track`	`.ex-slider-track`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Slider Range

Element	Selector
`Slider.Range`	`.ex-slider-range`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Slider Thumb

Element	Selector
`Slider.Thumb`	`.ex-slider-thumb`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`