Html Range Slider with Javascript

Question

So, I recently messed around with the html range slider style.

I came across a pen on codepen, which had various really inspiring projects, some of which functioned.

This is the source code from one.

HTML:

<input type="range" data-idx="1"> 

CSS

 html { background: #393939; } input[type='range'] { display: block; margin: 2.5em auto; border: solid .5em transparent; padding: 0; width: 15.5em; height: 1em; border-radius: .25em; background: transparent; font-size: 1em; cursor: pointer; } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type='range']::-webkit-slider-runnable-track { width: 15.5em; height: 0.5em; border-radius: 0.25em; background: #fff; } .js input[type='range']::-webkit-slider-runnable-track { background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff; } input[type='range']::-moz-range-track { width: 15.5em; height: 0.5em; border-radius: 0.25em; background: #fff; } .js input[type='range']::-moz-range-track { background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff; } input[type='range']::-ms-track { border: none; width: 15.5em; height: 0.5em; border-radius: 0.25em; background: #fff; color: transparent; } input[type='range']::-ms-fill-lower { border-radius: 0.25em; background: #e44e4f; } input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track { background-size: 50% 100%; } input[type='range']:nth-of-type(1)::-moz-range-track { background-size: 50% 100%; } input[type='range']:nth-of-type(1)::-webkit-slider-thumb { margin-top: -0.125em; border: none; width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 0.125em #333; background: #fff; } input[type='range']:nth-of-type(1)::-moz-range-thumb { border: none; width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 0.125em #333; background: #fff; } input[type='range']:nth-of-type(1)::-ms-thumb { border: none; width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 0.125em #333; background: #fff; } input[type='range']:nth-of-type(1)::-ms-tooltip { display: none; } input[type='range']:focus { outline: none; box-shadow: 0 0 0.25em #e44e4f; } 

JavaScript:

 var s = document.createElement('style'), r = document.querySelectorAll('input[type=range]'), prefs = ['webkit-slider-runnable', 'moz-range'], styles = [], l = prefs.length n = r.length; document.body.appendChild(s); var getTrackStyleStr = function(el) { var str = '', j = el.dataset.idx, min = el.min || 0, perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value, val = perc + '% 100%'; for(var i = 0; i < l; i++) { str += '.js input[type=range]:nth-of-type(' + j + ')::-' + prefs[i] + '-track{background-size:' + val + '}'; } return str; }; var getTipStyleStr = function(el) { var str = '.js input[type=range]:nth-of-type(' + el.dataset.idx + ') /deep/ #thumb:after{content:"' + el.value + '%"}'; return str; }; for(var i = 0; i < n; i++) { styles.push(''); r[i].addEventListener('input', function() { styles[this.dataset.idx] = getTrackStyleStr(this); if(this.classList.contains('tip')) { styles[this.dataset.idx] += getTipStyleStr(this); } s.textContent = styles.join(''); }, false); } 

This works fine for a single range element, but if I try to add additional range elements on one page and change the data attribute to data-idx="2" , this will not work, the first range will control them all.

How to configure the code so that each range works independently?

Here is the JSFiddle of the code I'm using, for some reason javascript isn’t working there at all, but does it work fine on codepen? Hm ...

Here is the original Codepen

Answer 1

DECISION

 var r = document.querySelectorAll('input[type=range]'), prefs = ['webkit-slider-runnable', 'moz-range'], styles = [], l = prefs.length, n = r.length; var getTrackStyleStr = function(el, j) { var str = '', min = el.min || 0, perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value, val = perc + '% 100%'; el.previousElementSibling.textContent = el.value; for(var i = 0; i < l; i++) { str += "input[type=range][data-rangeId='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} '; } return str; }; var setDragStyleStr = function(evt) { var trackStyle = getTrackStyleStr(evt.target, this); styles[this].textContent = trackStyle; }; for(var i = 0; i < n; i++) { var s = document.createElement('style'); document.body.appendChild(s); styles.push(s); r[i].setAttribute('data-rangeId', i); r[i].addEventListener('input', setDragStyleStr.bind(i)); } 

 html { background: #393939; } div { margin: 2.5em auto; } input[type='range'] { display: block; margin: 0.2em auto; border: solid .5em transparent; padding: 0; width: 15.5em; height: 1em; border-radius: .25em; background: transparent; font-size: 1em; cursor: pointer; } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type='range']::-webkit-slider-runnable-track { width: 15.5em; height: 0.5em; border-radius: 0.25em; background: #fff; } input[type='range']::-webkit-slider-runnable-track { background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff; } input[type='range']::-moz-range-track { width: 15.5em; height: 0.5em; border-radius: 0.25em; background: #fff; } input[type='range']::-moz-range-track { background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff; } input[type='range']::-ms-track { border: none; width: 15.5em; height: 0.5em; border-radius: 0.25em; background: #fff; color: transparent; } input[type='range']::-ms-fill-lower { border-radius: 0.25em; background: #e44e4f; } input[type='range']::-webkit-slider-runnable-track { background-size: 0% 100%; } input[type='range']::-moz-range-track { background-size: 0% 100%; } input[type='range']::-webkit-slider-thumb { margin-top: -0.125em; border: none; width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 0.125em #333; background: #fff; } input[type='range']::-moz-range-thumb { border: none; width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 0.125em #333; background: #fff; } input[type='range']::-ms-thumb { border: none; width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: 0 0 0.125em #333; background: #fff; } input[type='range']::-ms-tooltip { display: none; } input[type='range']:focus { outline: none; box-shadow: 0 0 0.25em #e44e4f; } output[for='range'] { font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif; font-size: 13px; color: white; display: block; text-align: center; } 

 <div> <output for="range">0</output> <input type="range" value="0"> </div> <div> <output for="range">0</output> <input type="range" value="0"> </div> <div> <output for="range">0</output> <input type="range" value="0"> </div> 

Answer 2

JQuery UI offers some functional sliders that can be used in multiple instances per page. You do not need to write or modify as much code to use them as above. If you are not trying to avoid jquery, this might be the best option for you.

Here is a link to a demonstration of several sliders .

The approach used for several sliders, of course, depends on jquery, but taking into account the markup, for example:

 <div id="eq"> <span>88</span> <span>77</span> <span>55</span> <span>33</span> <span>40</span> <span>45</span> <span>70</span> </div> 

A simple .each statement processes them all.

 $( "#eq > span" ).each(function() { // read initial values from markup and remove that var value = parseInt( $( this ).text(), 10 ); $( this ).empty().slider({ value: value, range: "min", animate: true, orientation: "vertical" }); }); 

Edit:. According to the comments below, if you want to add tooltips / tooltips, you need to minimize your own. Here is a quick example from some code that I wrote last year. It has some specific behaviors that fit the needs of my users, but this should give you an idea. The identifier "hintrow" refers to the row of the table on the grid containing my slider. Thanks to experimentation, you can find a better place compared to your sliders to add this. It will be located so that you want the dom node to add it.

 function drawExtCues(){ z = 200; $('#hintrow').append('<div id="hintContainer" style="position:relative"></div>'); for(h in rowobjects){ z++; $('#hintContainer').append('<div title="' + rowobject[h].property1 + '" class="' + rowobject[h].property2+ ' ui-slider-range hint" style="z-index:' + z +';">' + rowobject[h].property1+ '</div>'); } $('.hint').mouseover(function(){ hintMouseOver(); }); } function hintMouseOver(){ $('.hint').addClass('hintInspect',500); $('.hint').unbind('mouseover'); $('.hint').click(function(){ $J('.hint').removeClass('hintInspect',500); $J('.hint').mouseover(function(){hintMouseOver();}) }); } 

Pay attention to z ++. This was used to ensure that my tool tips stacked up. Since we made them click to reject in our case, this worked well. You do not need to do this, but if you do not use the click to reject, you may need to bind a timeout to clear the hint for you.

The hintMouseOver function does some house cleaning, such as disconnecting itself to prevent repeated calls. This is a rebound after the click event to reject the tooltip is fired. This is just the behavior of my client. You could do a lot here. The hintInspect class is basically style rules for how the tooltip appears. You can do as you like. It seems I just used a simple black outline with a gray background.