Question

嗨，我有一个滑块，它的价值是过去十年的年份。我的滑块工作的当前方式是文档加载时默认显示的第一个输出。但是我实际上想要在视觉上向访问者显示这是一个值为years的滑块。

因此，我希望所有可用的输出都显示在文档加载上。我不太确定如何解决这个问题，因为我首先使用了一个教程来帮助创建滑块。

我尝试的是改变以下内容：

.next("output")
 then do the logic....

为：

 .each("output")
 then do the logic....

然而这无效。

如果有人可以帮助我，那就太棒了！

我的代码位于下方或查看jsFiddle：

JS / js.js

$(function() {
   var el, newPoint, newPlace, offset;
   $("input[type='range']").change(function() {
     el = $(this);
     width = el.width();
     newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
     offset = -1.3;
     if (newPoint < 0) { newPlace = 0;  }
     else if (newPoint > 1) { newPlace = width; }
     else { newPlace = width * newPoint + offset; offset -= newPoint;}
     el
       .next("output")
       .css({
         left: newPlace,
         marginLeft: offset + "%"
       })
       .text(el.val());
   })
   .trigger('change');
 });

index.html

<input id="year_range" type="range" min="2003" max="2013" value="2003" step="1" />
<output for="year"></output>

Answer 1

没有神奇的方法可以做到这一点。您必须在滑块前添加div以包含标签。在div内，您必须放置一些内嵌块以包含每年，滑块中的点数宽度为9％。

输出处于绝对位置，因此它会越过标签。

HTML Range Slider使用jQuery显示文档加载时的输出元素

1 个答案: