[英]JQuery UI Slider with Non-linear steps
I'm following skobaljic's excellent solution to a similar question... ( JQuery UI Slider with Non-linear/Exponential/Logarithmic steps ) 我正在关注skobaljic对类似问题的出色解决方案......( 具有非线性/指数/对数步骤的JQuery UI滑块 )
var slider = $("#slider-range").slider({
range: true,
min: 0,
max: 100,
step: 1,
values: [10, 80],
slide: function (event, ui) {
$("#amount").val("RM " + commafy(ui.values[0]) + " to RM " + commafy(ui.values[1]));
}
});
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) +
" to RM " + commafy($("#slider-range").slider("values", 1)));
function commafy(val) {
/* Total range 0 - 2,500,000 */
/* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */
/* So, final dividing */
var toPresent = 0;
if (val < 50) {
toPresent = (val / 50) * 25000;
} else {
toPresent = 250000 + (val - 50) / 50 * 2750000;
};
return String(toPresent).split("").reverse().join("")
.replace(/(.{3}\B)/g, "$1,")
.split("").reverse().join("");
}
His fiddle is here http://jsfiddle.net/kk7kuy6p/ 他的小提琴在这里http://jsfiddle.net/kk7kuy6p/
I need a range selector that goes from 0 - 250000 in the first 50%, then to 3,000,000 in the second 50%. 我需要一个范围选择器,在前50%中从0到250000,然后在第二个50%中变为3,000,000。 I have adjusted the code and all is well - mostly. 我调整了代码,一切都很好 - 主要是。
var slider = $("#slider-range").slider({
range: true,
min: 0,
max: 100,
step: 1,
values: [64, 78],
slide: function(event, ui) {
$("#amount").val("£ " + commafy(ui.values[0]) + " - £ " + commafy(ui.values[1]));
$("#newpricemin").val(commafy(ui.values[0]));
$("#newpricemax").val(commafy(ui.values[1]));
}
});
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) +
" - £ " + commafy($("#slider-range").slider("values", 1)));
function commafy(val) {
/* Total range 0 - 3,000,000 */
/* 50% from 0 to 250,000, what have left (2,750,000) */
/* So, final dividing */
var toPresent = 0;
if (val < 50) {
toPresent = (val / 50) * 250000;
} else {
toPresent = 250000 + (val - 50) / 50 * 2750000;
};
return String(toPresent).split("").reverse().join("")
.replace(/(.{3}\B)/g, "$1,")
.split("").reverse().join("");
}
My fiddle http://jsfiddle.net/10231kq7/6/ 我的小提琴http://jsfiddle.net/10231kq7/6/
I have two minor issues. 我有两个小问题。 The scale jumps oddly at 64% and 78% but I have no idea why. 规模急剧上升到64%和78%,但我不明白为什么。 Also, I can't get the range to display in anything other than an input box - ideally I want it in a span. 此外,我无法让输出框中显示的范围 - 理想情况下我希望它在一个范围内。 It's probably something very obvious, but java is really not my strong point, any help would be appreciated. 这可能是非常明显的事情,但java确实不是我的强项,任何帮助都会受到赞赏。
You have two issues. 你有两个问题。 First, the strange jumps are a result of a floating point problem . 首先,奇怪的跳跃是浮点问题的结果。 This can be fixed by calling Math.floor on the output numbers. 这可以通过在输出数字上调用Math.floor来修复。
Secondly, you are using the .val() command in jquery. 其次,您在jquery中使用.val()命令。 To edit a span, you need to use .text() 要编辑范围,您需要使用.text()
As follows: 如下:
var slider = $("#slider-range").slider({
range: true,
min: 0,
max: 100,
step: 1,
values: [64, 78],
slide: function(event, ui) {
$("#amount").text("£ " + commafy(ui.values[0]) + " - £ " + commafy(ui.values[1]));
$("#newpricemin").val(commafy(ui.values[0]));
$("#newpricemax").val(commafy(ui.values[1]));
}
});
$("#amount").val("£ " + commafy($("#slider-range").slider("values", 0)) +
" - £ " + commafy($("#slider-range").slider("values", 1)));
function commafy(val) {
/* Total range 0 - 3,000,000 */
/* 50% from 0 to 250,000, what have left (2,750,000) */
/* So, final dividing */
var toPresent = 0;
if (val < 50) {
toPresent = (val / 50) * 250000;
} else {
toPresent = 250000 + (val - 50) / 50 * 2750000;
};
toPresent=Math.floor(toPresent);
return String(toPresent).split("").reverse().join("")
.replace(/(.{3}\B)/g, "$1,")
.split("").reverse().join("");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.