VCL slider

Slider based selection of a discrete or continuous value within a given range.

Features

The slider consists of the following elements:

• rail,
• knob,
• scale,
• scale point marker,
• scale point label.

The scale is optional and can be inside or outside the rail or both.

Usage

basic example

Contextual states:

basic example

Note that the whole element is designed to receive focus although only the knob is visually highlighted.

Classes

• vclSlider
• vclSliderRail
• vclSliderKnobContainer
• vclSliderKnob
• vclSliderScale
• vclSliderScalePointMark
• vclSliderScalePointLabel

Modifiers

Contextual state:

• vclFocused
• vclDisabled

Variables

• --slider-rail-bg-color
• --slider-knob-bg-color
• --slider-scale-point-mark-bg-color

Demo

example.html on GH-pages.