更改 Jquery Mobile Range Slider 值字段的位置

Question

我将此代码用于 jquery 移动范围滑块插件。

<div class="ui-field-contain">
  <div data-role="rangeslider">
    <label for="range-7a">Rangeslider:</label>
    <input name="range-7a" id="range-7a" min="0" max="100" value="0" type="range" />
    <label for="range-7b">Rangeslider:</label>
    <input name="range-7b" id="range-7b" min="0" max="100" value="100" type="range" />
  </div>
</div>

结果将在 slider.Is 的两端显示值，它们以任何方式将范围值放在滑块顶部，如

Answer 1

那些带有数字的输入的 css 是 input.ui-slider-input。但是，如果您隐藏原始值并记录要在单独的 div.

中显示的值会更好

演示 A

https://jsfiddle.net/fvbyh3hh/

CSS

input.ui-slider-input {
float: none !important; 
margin-left: 23%;
display:inline-block !important;
}

演示 B

https://jsfiddle.net/aeg0p5kw/

HTML加法

<div class='range1'>0 - 100</div>

Css

input.ui-slider-input {
display:none !important;
}

.range1 {
margin-left:55%;
color:red;
}

Jquery

var vala, valb;
$(document).on("change", "#range-7a, #range-7b", function(){ 
vala = $("#range-7a").val();
valb = $("#range-7b").val();
$(".range1").text(vala+" - "+valb);  
})

更改 Jquery Mobile Range Slider 值字段的位置

Change the Position of Jquery Mobile Range Slider values field

jquery-mobile