Custom Range Slider For Webkit Browsers – webkit-input-range-fill-lower.js

Preview:

Description:

A simple JavaScript library for the native slider input that allows you to customize the lower portion of the track (left of the thumb) of a range slider.

How to use it:

1. Download and import the JavaScript webkit-input-range-fill-lower.js into the document.

<script src="dist/webkit-input-range-fill-lower.js"></script>

2. Attach the function to the <input type=”range” /> element and determine the background color of the lower portion of the track.

<input id="example" type="range" min="0" max="100" value="9" />

new WebkitInputRangeFillLower({
    selectors: ['example'],
    color: '#222'
});

3. The color option also accepts gradients.

new WebkitInputRangeFillLower({
    selectors: ['example'],
    gradient: 'rgba(247, 4, 32, 0.87), rgb(0, 9, 242)'
});