我在项目中使用Ion.RangeSlider,但是我需要将滑块范围更改为RTL。
我该怎么做?
jQuery代码:
<script>
var $range = $(".js-range-slider");
var $result = $(".js-result");
var $result2 = $(".js-result2");
var minrange = 0;
var minrange_title = 69000;
var maxrange = 4596800;
var avreg = (maxrange/100);
var avregfinal = (avreg * 10);
var avff = Math.ceil(avregfinal);
function prettify(num) {
var n = num.toString();
return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + "," );
}
$range.ionRangeSlider({
type: "double",
grid: false,
min: minrange_title,
max: maxrange,
from: minrange_title,
to: maxrange,
step: (avff - minrange_title),
hide_min_max: true,
hide_from_to: true,
prettify_separator: ",",
onStart: function(data) {
$result.text(prettify(data.from));
$result2.text(prettify(data.to));
},
onChange: function(data) {
$result.text(prettify(data.from));
$result2.text(prettify(data.to));
}
});
</script>
HTML和CSS代码:
<style>
.range-slider {
position: relative;
height: 80px;
width: 210px !important;
margin: auto;
}
.extra-controls {
font-size: 9pt;
position: relative;
float: left;
padding: 10px 0 0;
text-align: right;
color: #4d4d4d;
}
.extra-controls2 {
position: relative;
float: right;
padding: 10px 0 0;
font-size: 9pt;
color: #4d4d4d;
}
</style>
<div class="range-slider">
<input type="text" class="js-range-slider" value="" />
<div class="yekan toman extra-controls js-result">
</div>
<div class="yekan toman extra-controls2 js-result2">
</div>
</div>
我需要更改此滑块范围的代码,并且我不喜欢选择其他滑块范围。
http://ionden.com/a/plugins/ion.rangeSlider/en.html
谢谢。
最佳答案
http://jsfiddle.net/SinaSaderi/Ldbr343s/
var $range = $(".js-range-slider"),
min = 10,
max = 70;
$range.ionRangeSlider({
type: "single",
min: min,
max: max,
from: max - 20 + min,
prettify: function(num) {
var tmp_min = min,
tmp_max = max,
tmp_num = num;
if (min < 0) {
tmp_min = 0;
tmp_max = max - min;
tmp_num = num - min;
tmp_num = tmp_max - tmp_num;
return tmp_num + min;
} else {
num = max - num + min;
return num;
}
}
});
关于javascript - 如何将滑块范围方向更改为RTL?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42859488/