Houzz UI

Basic usage

Used for making selections from a range of values. Use min, max, step to define the range and how the values should change in response to mouse drag events.

To set the dimension of the Slider, most Box props can be used to configure the bounding box. The slider track is vertically aligned at the center. But notice that markers and thumb don't take up spaces and are not constrained by the bounding box.

Origin

Useful when the value usually starts within the range it is allowed.

Markers

Display pre-defined values with labels for quick access, or without them to serve as pure indicators.

There's also a simpler form that sets the label from its value.

Size

Use the size prop to select from available size variants.

Handlers

onChangeCommitted is only called when the user drags the thumb and then releases the mouse button, or when the marker label is clicked. onChange handler, on the other hand, is called whenever there's a value change.

Props

Slider

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`gradient`	`ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>`	-
`name`	`string`	Name of the input form control. Submitted with the form as part of a name/value pair.
`inputProps`	`Partial<Pick<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "size" \| ... 285 more ... \| "onTransitionEndCapture"> & { ...; } & { ...; }, "size" \| ... 285 more ... \| "onTransitionEndCapture"> & Partial<...>, "size" \| ... 286 more ... \| "onTransitionEndCapture"> & { ...; }, ...`	These props will be passed down into the hidden input range element. `type` prop is not accepted since its hardcoded to "range". If there're aria label/labeledby fields, it should be set here.
`disabled`	`boolean`	Will make switch read only.
`value`	`number`	Current value of the form control. Submitted with the form as part of a name/value pair.
`defaultValue`	`number`	The default value. Use when the component is not controlled.
`step`	`number`	The granularity with which the slider can step through values. The allowed value will be min, min+step, min+2*step, ... It's suggested that (max - min) can be evenly divisible by the step.
`max`	`number`	The maximum allowed value of the slider. Should not be equal to min.
`min`	`number`	The minimum allowed value of the slider. Should not be equal to max.
`origin`	`number`	Whether the natural value should be in the middle. For instance, when the slider is used to represent the temperature and the range is (-100 to 100), the slider might start with 0 (all in Celsius). This value must be in the range of [min, max]. It defaults to min.
`onChange`	`(value: number) => void`	Event handler when the slider value changes.
`onChangeCommitted`	`(value: number) => void`	Event handler for the slider; only fired when mouseup/keydown is triggered.
`size`	`"medium" \| "small"`	Size variant
`markers`	`Marker[]`	A list of markers.