Preview

Usage

<cs-slider value="50"></cs-slider>
<cs-slider min="0" max="100" step="10" value="30"></cs-slider>

Properties

aria-descriptionstring default: null

Adds an aria-description for slider labels.

Use when sliders have formatted reference values.

aria-labelstring default: null

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

disabledboolean default: false

Whether or not the slider is disabled.

hide-fill-lineboolean

Hides the colored fill line, so only the handle is visible.

i18n-stringsSliderProps.I18nStrings

An object containing all the necessary localized strings required by the component.

maxnumberrequired

Indicates the maximum value.

minnumberrequired

Indicates the minimum value.

read-onlyboolean

Specifies if the control is read-only, which prevents the user from modifying the value, but does not prevent the value from being included in a form submission. A read-only control is still focusable.

reference-valuesReadonlyArray<number>

Labels shown between the minimum and maximum values.

stepnumber default: 1

How big the step size is.

tick-marksboolean

Show the tick marks along the slider line. Use with stepped sliders, except in extreme cases.

valuenumber default: 0

Indicates the current value.

value-formatter(value: number) => string

Formats the values. This will format both the labels and the tooltip.

Events

changeCustomEvent<SliderProps.ChangeDetail>

Called when the user selects a value. The event detail contains the current value.