我創建了我的簡單范圍滑塊,這是我的代碼
$(".slider").slider({
max: 120,
min: 30
}).slider("pips");
<div class="slider"></div>
我會知道如何在滑塊上方顯示帶有當前值的標簽以及如何將當前值傳遞給輸入隱藏表單。我應該在 value="" 中輸入什么來獲取當前滑塊選擇的值?
<input type="hidden" value="" name="setting">
uj5u.com熱心網友回復:
做你需要掛鉤到滑塊的slide或事件的事情。change傳遞給這些事件的處理函式的引數允許您訪問當前值,這使您可以根據需要更新 DOM:
let $label = $('.slider-label');
let $value = $('.slider-value');
$(".slider").slider({
max: 120,
min: 30,
slide: (e, ui) => {
$label.text(ui.value);
$value.val(ui.value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy D176RYoop1Da f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk 5zjwyJaoRUgCdOrfSDhmMID2u4 OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p class="slider-label">30</p>
<input type="text" class="slider-value" value="30" name="setting" />
<div class="slider"></div>
另請注意,這slider('pips')不是 jQueryUI 滑塊插件的有效呼叫,將導致錯誤。您應該洗掉該行。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/465594.html
上一篇:如何獲得查詢嵌套評論?
