Question

所以我最近一直在搞乱html范围滑块的样式。

我在codepen上遇到了一支不同的笔，有一些真正鼓舞人心的设计，其中一些是有效的。

这是一个源代码。

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);
}

这适用于一个范围元素但是如果我尝试在同一页面上添加更多范围元素，并将数据属性更改为data-idx="2"它将无效，第一个范围将控制它们全部。

如何调整代码以使每个范围独立工作？

这是我正在使用的代码的 JSFiddle ，由于某种原因，javascript根本就没有用，但它在codepen上工作正常吗？嗯...

以下是原始 Codepen

Answer 1

SOLUTION

＆＃13;

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));
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

Jquery UI提供了一些可在页面上的多个实例中使用的功能滑块。您不必像上面那样编写或修改尽可能多的代码来使用它们。除非你试图避免使用jquery，否则这对你来说可能是更好的选择。

以下是multiple sliders demo的链接。

用于多个滑块的方法当然依赖于jquery，但是给出了标记，例如：

<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>

一个简单的.each语句处理它们的全部设置。

$( "#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"
  });
});

修改：根据下面的评论，如果您想添加工具提示/提示，则必须自行推送。这是我去年写的一些代码的简短例子。它有一些特定的行为符合我的用户的需求，但这应该给你一个想法。 id＆＃34; hintrow＆＃34;指的是包含我的滑块的网格上的表格行。通过实验，您可以找到相对于各种滑块的最佳位置来追加它。它将被定位，因此您只需要一个dom节点将其附加到。

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();})
        });                 

  }

注意z ++。这用于确保我的工具提示会堆叠。由于我们在他们的案例中点击了解雇，因此效果很好。您不必这样做，但如果您不使用点击解除，则可能需要绑定超时以清除工具提示。

hintMouseOver函数执行一些清理工作，例如解除绑定以防止重复调用。点击事件后反弹以解除工具提示被触发。这只是我的客户想要的行为。你可以在这里做很多事情。类hintInspect基本上是工具提示将如何显示的样式规则。你可以按自己喜欢的方式看待它。我想我只是使用了带有灰色背景的简单黑色轮廓。

带有Javascript的Html Range滑块

2 个答案: