gpt4 book ai didi

jQuery Mobile 双范围 slider

转载 作者:可可西里 更新时间:2023-11-01 13:16:09 26 4
gpt4 key购买 nike

我在 JQM 中制作了一个双范围 slider ,方法是将 slider 放在彼此的顶部。有什么方法可以阻止最小值超过最大值?

我不确定 slider 是否使用 HTML5 范围输入类型

<style type="text/css">
.priceRangeInfo{
position: relative;
height: 30px;
margin-top: 60px;
}
.priceRangeInfo label{
position: absolute;
top: -30px;
left: 10px;
} /* moves label field */
.priceRangeInfo #buying_slider_min{
top: -40px;
position: absolute;
left: 100px;
} /* moves first input field */
.priceRangeInfo #buying_slider_max{
top: -40px;
position: absolute;
left: 170px;
} /* move second input field */
.priceRangeInfo div.ui-slider{
position: absolute;
} /* move both sliders - adressing 1st slider with CSS is hard */
.priceRangeInfo div:last-child{
position: absolute;
left: 0px;
} /* correct 2nd slider position to fit exactly on top of 1st slider */
</style>
<div class="priceRangeInfo">
<label for="buying_slider_min">Price</label>
<input type="range" name="buying_slider_min" id="buying_slider_min" class="minBuyingSlider" value="0" min="0" max="100" />
<input type="range" name="buying_slider_max" id="buying_slider_max" class="maxBuyingSlider" value="100" min="0" max="100" />
</div>

刚刚发现 YUI 有一个很棒的双 slider ,可以与 JQM 完美配合!!!

http://developer.yahoo.com/yui/examples/slider/slider_dual_with_highlight.html

最佳答案

这样的东西会工作吗:

JS

$('#buying_slider_min').change(function() {
var min = $(this).val();
var max = $('#buying_slider_max').val();

if(min > max) {
$('#buying_slider_max').val(min);
$('.maxBuyingSlider').slider('refresh');
}
});

HTML

<div class="priceRangeInfo">
<label for="buying_slider_min">Price</label>
<input type="range" name="buying_slider_min" id="buying_slider_min" class="minBuyingSlider" value="0" min="0" max="100" />
<input type="range" name="buying_slider_max" id="buying_slider_max" class="maxBuyingSlider" value="100" min="0" max="100" data-track-theme="b"/>
</div>

CSS

.priceRangeInfo{
position: relative;
height: 30px;
margin-top: 60px;
}
.priceRangeInfo label{
position: absolute;
top: -30px;
left: 10px;
} /* moves label field */
.priceRangeInfo #buying_slider_min{
top: -40px;
position: absolute;
left: 100px;
} /* moves first input field */
.priceRangeInfo #buying_slider_max{
top: -40px;
position: absolute;
left: 170px;
} /* move second input field */
.priceRangeInfo div.ui-slider{
position: absolute;
} /* move both sliders - adressing 1st slider with CSS is hard */
.priceRangeInfo div:last-child{
position: absolute;
left: 0px;
}

关于jQuery Mobile 双范围 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8895748/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com