相关疑难解决方法(0)

我在Chrome 41中使用jQuery 2.1.我需要从输入滑块中获取值,因为它会发生变化; 但是,当我使用jquery的change事件时,我只在鼠标释放后从滑块中获取值,而不是在mousedown和drag中.

这个小例子说明了这个问题:

<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />

<br />

<span id="slider_value">Nothing yet.</span>

<script>
$(document).on('change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});
</script>

我想我可以通过在鼠标上/下事件上设置布尔值然后获取mousemove事件的值来提出修复.有更清洁的解决方案吗？

有没有办法我还可以为HTML5 type = range控件中的每个步骤设置一些标签文本.基本上我有一个范围控制<input type="range" step=1 min=0 max=4>,每个步骤我都希望在控件中显示一些标签.有没有办法做到这一点？

我已经实现了一个范围滑块,它使用该值从数组中获取元素并显示该元素,而不是显示范围值.它适用于Chrome和Firefox但不适用于IE 11 - 当滑块移动时,该值不会获得更新的元素.

HTML:

<div id="yearSlider" style="z-index:2;">
  <form>
    <div align="center">
      <input 
        type="range" 
        min=1 
        max=10 
        value=0 
        id="fader" 
        step=1 
        oninput="outputUpdate(years[value])"
      >
      <output for=fader id=volume>1908</output>
    </div>
  </form>

使用Javascript:

var years = [0,1908, 1910, 1912, 1915, 1920, 1935, 1949, 1982, 2005, 2015];

function outputUpdate(vol) {
  document.querySelector('#volume').value = vol;
}

通过搜索,我发现这与"oninput"在IE中的工作原理(或不工作原理)有关.

我试着从这里加入解决方案

<input 
  type="range" 
  min="5" 
  max="10" 
  step="1" 
  oninput="showVal(this.value)" 
  onchange="showVal(this.value)"
>

但它仍然没有更新.

我的jsfiddle

所以我一直致力于HTML5 iPad应用程序的工作,并遇到了一个问题.我第一次使用这个应用程序并依靠桌面Safari来快速获取我的应用程序(可能不是最好的东西,无论如何......),我无法访问iPad

我不得不依赖于接口的一部分输入范围.看到HTML5有一个范围输入后,我很高兴,因为这正是我需要的.我甚至设法将其设计为完全符合设计的样式:

这很棒!...直到我真的在iPad上尝试它并且它不起作用.只显示文本输入.我现在想知道该做什么......我确实需要一个滑块,当拖动时它会吐出数据.显然需要与触摸一起工作.在浏览了整个网络后,似乎没有一个可靠的解决方案.

你们在这里建议什么？编写一个工作触摸友好滑块的正确方法是什么,就像它不支持的原生HTML5一样!？

任何想法/想法/知识/经验将不胜感激!詹姆士

我正在使用此代码来获取滑块的值：

<input type="range" min="30" max="300" value="30" (change)="valueChanged($event)"></div>

不幸的是，该valueChanged方法是在鼠标抬起时触发的。如何在拖动拇指时不断收到更改通知？

(onmousemove) 不起作用。

我正在尝试使用Knockout.js 绑定输入范围对象.值绑定似乎运行良好,但我无法找到一种方法来拖动滑块时更新observable.只有当我释放鼠标时才会更新observable,因为我创建了一个音量滑块,所以给出了糟糕的体验.

我已经尝试了每个valueUpdate选项,没有任何结果.它们似乎仅用于文本输入.

var ViewModel = function() { 
    this.rangeValue = ko.observable(50);
};
 
ko.applyBindings(new ViewModel()); // This makes Knockout get to work

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: rangeValue"/>
<input type="range" data-bind="value: rangeValue, valueUpdate: 'change'"/>

我正在尝试编写一些代码来使用滑块动态更改文本的大小，但是它不起作用。

$('input').on('change', function() {
  var v = $(this).val();
  $('.userText p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" min="1.2" max="2.6" step=".2" id="slider" />
<div class="userText">
  <p>Some text that should dynamically change size</p>
</div>

有人可以在这里提供任何建议吗？