Slider

Type: DefaultComponent

Overrides the default slider's style.

Colors: The filled section color, dragger color and focus state colors can be changed with classes provided by LunaUI. Use any of the default Colors in place of {color} variant.

• fill-{color} : Change the color of the area that is left of the dragger.

• dragger-{color} : Change the dragger color.

• focus-{color} : Changes the dragger color when the slider is in a focus state or when the dragger is in a hover state. Changes the text color only when the slider is in a focused state.

Below is an example with the classes fill-pink, dragger-teal, focus-teal.

 <engine:Slider label="Slider" value="42" high-value="100" show-input-field="true" inverted="false" fill="true" class="light fill-pink dragger-teal focus-teal" style="width: 100%;" />

Unfocused Slider

Focused Slider