# [VCL](https://vcl.github.io/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](/demo/example-basic.html)

Contextual states:

[basic example](/demo/example-states.html)

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

## Classes

- `slider`
- `slider-rail`
- `slider-knob-container`
- `slider-knob`
- `slider-scale`
- `slider-scale-point-mark`
- `slider-scale-point-label`

## Modifiers

Contextual state:

- `focused`
- `disabled`

## Variables

- `$slider-rail-bg-color`
- `$slider-knob-bg-color`
- `$slider-scale-point-mark-bg-color`