Slider
Creates a slider with the ability to select a value using the track.
Superkube contains only CSS/SCSS and does not contain Javascript. Because Superkube is independent of the implementation, you build the environment you need.
All the javascript is just for example and to show how the modules work.
Usage #
<div class="slider">
<div class="slider-track">
<div class="slider-fill"></div>
<div class="slider-handle"></div>
</div>
</div>
The slider can contain value labels.
<div class="slider">
<div class="slider-track">
<div class="slider-fill"></div>
<div class="slider-handle"></div>
</div>
<div class="slider-ticks">
<span class="slider-tick" data-value="0">0%</span>
<span class="slider-tick" data-value="10"></span>
<span class="slider-tick" data-value="20"></span>
<span class="slider-tick" data-value="30"></span>
<span class="slider-tick" data-value="40"></span>
<span class="slider-tick" data-value="50">50%</span>
<span class="slider-tick" data-value="60"></span>
<span class="slider-tick" data-value="70"></span>
<span class="slider-tick" data-value="80"></span>
<span class="slider-tick" data-value="90"></span>
<span class="slider-tick" data-value="100">100%</span>
</div>
</div>
Variables #
Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.
// colors
--slider-disabled-background-color: var(--palette-black-20);
--slider-track-background-color: var(--palette-black-10);
--slider-fill-background-color: var(--palette-active-base);
--slider-handle-background-color: var(--palette-white);
--slider-tick-border-color: var(--palette-black-30);
--slider-tick-color: var(--palette-black-50);
// vars
--slider-font-size: 11px;
--slider-line-height: 1.3;
--slider-height: 6px;
--slider-border-radius: var(--radius-base);
--slider-handle-size: 16px;
--slider-handle-box-shadow: 0 1px 3px var(--palette-black-50);