时间戳

首页 > 解决方案 > 如何使用 jquery 从滑块中获取值

jquery - 如何使用 jquery 从滑块中获取值

问题描述

我有一个从 Codepen.io 抓取的滑块，这是我正在使用的滑块的链接

https://codepen.io/dpdknl/pen/QggQRq

我想获取滑块在跨度中显示的值，以便将其传递给我的 jquery 函数。我怎么能抓住那个价值？我正在使用 onchange 事件将值发送到 jquery 函数。

<div class="range" data-labels='["All", "18 - 21","22 - 29","30 - 39","40 - 49","50+"]'>
    <input name="range" type="range" id="rangeAge" min="0" step="1" max="100" value="0">
    <div class="range-output">
        <output class="output" name="output" for="range"><span></span></output>
    </div>
    <div class="label-container">
        <div class="left-label" style="display:none;"></div>
        <div class="right-label" style="display:none;"></div>
    </div>
</div>

然后我试图用这个抓住它们......

    $('#rangeAge').on('slidechange', function(){        
        var min = $('#rangeAge').slider().value();  
        alert(min);
    });

感谢您的任何帮助。

当前代码的小提琴

https://jsfiddle.net/NoJqueryMaster/d45envbu/3/

标签： jquery

解决方案

该值可通过以下方式访问：

$('#rangeAge').slider().value()

每当您需要使用修改过的元素时，这就是通用公式，即您附加该 JQuery-UI 魔法的任何东西。

$(selector).widgetTypeName().methodInThatWidget()

既然您知道了，下面是针对您的特定案例的 API 文档。

对于事件，它有点不同。您必须注意他们在每个小部件的 API 页面上提供的示例。例如，滑块的 onChange 事件是这样工作的：

$(selector).on('slidechange', callback)

继续工作，发挥 JQuery 的魔力！

推荐阅读