InputSlider Deprecated

Sliders are required to have unique IDs and are ordinary range inputs of class .g-slider. The colour the left part will take is given via the data-color property:

HINT The slider requires JavaScript to work, otherwise the coloured left area will not match the thumb (round thingy). A simple jQuery implementation would be:

jsfunction sliderColor(id) {
    const slider = $(`#${id}`);

    const defaultColor = '#f4f6fA';
    const color = slider.data('color') === undefined ? defaultColor : slider.data('color');

    const min = slider.prop('min');
    const max = slider.prop('max');
    const val = slider.val();

    let pct = (100.0 * (val - min)) / (max - min);
    pct = pct < 2 ? 2 : pct;
    pct = pct > 98 ? 98 : pct;

    const backgrounds = [
        `-moz-linear-gradient(left, ${color} 0%, ${color} ${pct}%, ${defaultColor} ${pct}%)`,
        `-webkit-linear-gradient(left, ${color} 0%, ${color} ${pct}%, ${defaultColor} ${pct}%)`,
        `-o-linear-gradient(left, ${color} 0%, ${color} ${pct}%, ${defaultColor} ${pct}%)`,
        `linear-gradient(left, ${color} 0%, ${color} ${pct}%, ${defaultColor} ${pct}%)`,
    ];

    $(`<style>#${id}::-moz-range-track             {background-image:${backgrounds[0]}}</style>`).appendTo('head');
    $(`<style>#${id}::-webkit-slider-runnable-track{background-image:${backgrounds[1]}}</style>`).appendTo('head');
    $(`<style>#${id}::-webkit-slider-runnable-track{background-image:${backgrounds[2]}}</style>`).appendTo('head');
    $(`<style>#${id}::-ms-fill-lower               {background:${color}}</style>`).appendTo('head');
}
$('.g-slider').on("change mousemove", () => { sliderColor( this.id ); }); // enable slider colors
$('.g-slider').trigger("change"); // set initial color