Question

我正在努力实现这个确切的结果：

换句话说，我需要一个带有这种不均匀步骤代码的Jquery滑块......

int

...包含在执行$和分隔符的下面的代码中。我该怎么做？

https://jsfiddle.net/emphase/r4tvxucx/2/

非常感谢！

Answer 1

我用您提供的小提琴扩展了您的代码。我刚刚将addCommas()的来电添加到slide回调。

我还添加了一个数组initSteps来初始化范围滑块的最小值和最大值。这些值是索引的，对应于steps数组中的值。

＆＃13;

var steps = [0, 2000, 3000, 5000, 7500, 10000, 15000, 20000, 300000]; // Uneven step values
var initSteps = [1, 2]; // Index to value in steps for initializing the range slider

$("#slider").slider({
    range: true,
    min: 0,
    max: steps.length-1,
    step: 1,
    values: initSteps,
    slide:function(event, ui){
        $("#amount1").val("$" + addCommas(steps[ui.values[0]].toString()));
        $("#amount2").val("$" + addCommas(steps[ui.values[1]].toString()));
    }
});

$("#amount1").val("$" + addCommas(steps[initSteps[0]].toString()));
$("#amount2").val("$" + addCommas(steps[initSteps[1]].toString()));

function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

＆＃13;

body {padding: 50px;}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="slider"></div>
<div class="priceContainer">
    <div class="left">
        <label for="amount1">Min Price: </label>
        <input type="text" id="amount1" name="minPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" />
        <br />
        <label for="amount2">Max Price: </label>
        <input type="text" id="amount2" name="maxPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" />
    </div>
</div>

＆＃13;

Jquery滑块不均匀的步骤和格式

1 个答案: