vcl-slider

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

Usage no npm install needed!

<script type="module">
  import vclSlider from 'https://cdn.skypack.dev/vcl-slider';
</script>

README

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.