JQuery Slider, "단계"크기 변경 방법
JQuery Slider (범위 슬라이더 / 이중 슬라이더)를 사용하여 비선형 (일관되지 않은 "단계"크기) 값을 가질 수 있습니까?
수평 슬라이더를 다음과 같이 만들고 싶습니다.
|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0 500 750 1000 1250 1500 2000 2500 75000 100000...
예를 들어, 다음 JQuery 코드를 갖고 싶습니다.
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
$("#price-amount").html('$' + ui.values[0] + ' - $' + ui.values[1]);
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
위의 코드는 정확히 작동하지 않지만 그리드에 맞추기 기능은 작동하지 않습니다.
슬라이더 스케일이 귀하의 값 *에 비례하도록하고 싶은지 확실하지 않지만, 그렇다면 동일한 질문을 한 다른 사람에게 이에 대한 해결책을 제공했습니다. 여기에서 내 솔루션을 찾을 수 있습니다 . 기본적으로 slide슬라이더를 움직여 스테핑을 모방 할 때 트리거 되는 이벤트를 사용 하지만 단계를 정의하는 사용자 지정 배열을 기반으로합니다. 이렇게하면 균등하게 분산되지 않은 경우에도 미리 정의 된 값으로 "단계"할 수 있습니다.
* 즉, 슬라이더를 다음과 같이 표시하려면 :
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
그런 다음 여기에있는 다른 솔루션 중 하나를 선택합니다.하지만 슬라이더가 다음과 같이 보이도록하려면 (스케일링되지 않는 다이어그램) :
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
그렇다면 내가 연결 한 솔루션은 당신이 추구하는 것보다 더 많을 수 있습니다.
편집 : 좋습니다.이 버전의 스크립트는 이중 슬라이더와 함께 작동합니다.
$(function() {
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('values', 1));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
});
점프가 오른손 끝에 비해 너무 가깝기 때문에 맨 왼쪽 끝에서 약간 웃기게 보이지만 키보드 화살표를 사용하여 슬라이더를 이동하면 원하는대로 스테핑을 볼 수 있습니다. 이를 우회하는 유일한 방법은 척도를 너무 급격히 기하 급수적으로 변경하지 않는 것입니다.
편집 2 : 좋아, 실제 값을 사용할 때 간격이 너무 과장된 경우 슬라이더에 가짜 값 세트를 사용한 다음 실제 값을 사용해야 할 때에 해당하는 실제 값을 찾을 수 있습니다 ( 여기에있는 다른 솔루션이 제안한 것과 유사한 방식). 코드는 다음과 같습니다.
$(function() {
var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var values = [0, 1, 2, 3, 4, 5, 6, 7, 10, 15, 20, 25, 30, 40, 50, 60, 75, 100];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('values', 1)));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
function getRealValue(sliderValue) {
for (var i = 0; i < values.length; i++) {
if (values[i] >= sliderValue) {
return trueValues[i];
}
}
return 0;
}
});
values원하는 간격으로 배치 될 때까지 (슬라이더 정지 점을 나타내는) 배열 의 숫자를 조작 할 수 있습니다. 이렇게하면 사용자의 관점에서 값에 비례하여 미끄러지지 만 과장되지 않은 것처럼 느낄 수 있습니다. 분명히 실제 값이 동적으로 생성되는 경우 슬라이더 값을 정적으로 정의하는 대신 생성하는 알고리즘을 만들어야 할 수 있습니다.
HTML :
<body>
<p>
Slider Value: <span id="val"></span><br/>
Nonlinear Value: <span id="nlVal"></span><br/>
</p>
<div id="slider"></div>
</body>
JS :
$(function() {
var valMap = [0, 25,30,50,55,55,60,100];
$("#slider").slider({
// min: 0,
max: valMap.length - 1,
slide: function(event, ui) {
$("#val").text(ui.value);
$("#nlVal").text(valMap[ui.value]);
}
});
});
한 가지 옵션은 단계 크기 1을 사용하고 선택한 값을 포함하는 배열을 참조하는 것입니다. 0에서 시작하여 20까지 올라가 실제 값을 얻기 위해 array [value_of_slider]를 얻습니다. 사용자 지정 값 집합을 제공하는 방법이 있는지 여부를 알려줄만큼 슬라이더를 잘 모릅니다.
@Seburdis의 위 답변과 토론을 기반으로 귀하의 예에서 이름을 사용합니다.
var prices_array = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500, 2000, 2500, 5000, 10000];
function imSliding(event,ui)
{
//update the amount by fetching the value in the value_array at index ui.value
$('#amount').val('$' + prices_arr[ui.value] + ' - $' + prices_arr[prices_arr.length - 1]);
}
$('#slider-interval').slider({ min:0, max:values_arr.length - 1, slide: imSliding});
더 나은 솔루션을 제공 할 수 있다고 생각합니다. 아이디어는 슬라이더와는 별도로 실제 값이있는 배열을 유지 한 다음 step속성을 항상 1 로 설정 하고 슬라이더 index가 해당 배열과 함께 작동하도록 한 다음 실제 값을 가져 오는 것입니다. 내 실제 데이터 배열. 이 예제가 도움이되기를 바랍니다 : http://jsfiddle.net/3B3tt/3/
누군가 이것을 jQuery 웹 사이트에 올렸습니다. 보다:
http://forum.jquery.com/topic/non-linear-logarithmic-or-exponential-scale-for-slider
과
그것은 정확히 당신이 가진 것이지만 훨씬 간단합니다 (코드 한 줄처럼).
여기 내가 어떻게 했어. 여기 데모 -http : //janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html
원하는 값의 배열이
var amts=[50,100,150,200,225,250,300];
슬라이더의 실제 값을 사용하는 대신 배열의 인덱스에서 값을 출력합니다.
이렇게하면 증분과 단계가 균등하게 분산됩니다. 그 후에 레이블의 값을 가져 오거나 var에 저장할 수 있습니다.
$('#amtslider').slider({
min:0,
max:amts.length-1,
step:1,
value:0,
change:function(event, ui){
//alert(amts[$(this).slider("value")]);
//alert($(this).slider("value"));
$('#lbl_amt').val(amts[$(this).slider("value")]);
},
slide:function(event, ui){
$('#lbl_amt').val(amts[$(this).slider("value")]);
}
});
다음은 사용자 정의 (일관되지 않은 "단계"크기) 이중 슬라이더 (아이디어가 명확 해지면 단일 슬라이더로 수정할 수 있음)에 대한 간단한 솔루션입니다. 내 슬라이더의 이름은 "slider-euro"이고 텍스트 영역은 다음과 같습니다. 코드에서 볼 수 있듯이 이름이 amount-euro입니다. 아이디어는 0에서 100까지의 슬라이더와 101 자리의 배열 ( "실제 값")을 갖는 것입니다. 슬라이더 값은 해당 배열의 위치로 이해됩니다. 유일한 것은 슬라이더 값을 얻을 때 배열을 참조해야한다는 것입니다. 내 예는 다음과 같습니다.
$(function() {
var realvalues = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000, 95000, 100000, 105000, 110000, 115000, 120000, 125000, 130000, 135000, 140000, 145000, 150000, 155000, 160000, 165000, 170000, 175000, 180000, 185000, 190000, 195000, 200000, 205000, 210000, 215000, 220000, 225000, 230000, 235000, 240000, 245000, 250000, 255000, 260000, 265000, 270000, 275000, 280000, 285000, 290000, 295000, 300000, 310000, 320000, 330000, 340000, 350000, 360000, 370000, 380000, 390000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1500000, 2000000];
$( "#slider-euro" ).slider({
range: true,
min: 0,
max: 100,
step: 1,
values: [ 25, 50 ],
slide: function( event, ui ) {
$( "#amount-euro" ).val( realvalues[ui.values[ 0 ]] + " € - " + realvalues[ui.values[ 1 ]] + " €");
}
});
$( "#amount-euro" ).val( realvalues[$( "#slider-euro" ).slider( "values", 0 )] + " € - " + realvalues[$( "#slider-euro" ).slider( "values", 1 )]+" €" );
});
if min and max value are the same, slider value don't change
change this part
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
into
if ( ui.values[0] == ui.values[1] ) {
slider.slider('values', 0, value);
slider.slider('values', 1, value);
}else{
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}else {
slider.slider('values', 1, value);
}
}
I had to do something similar and even though this is a late response, someone else may happen on to this thread just as I did, and find my solution useful. Here is the solution I created:
So apparently, postings containing links to jsfiddle "must be accompanied by code".
OK - here ya go, stackoverflow... Some lovely "code" for you.
Just change the values.
$( "#price-range" ).slider({
range: true,
min: 1000,
max: 300000000,
/*step:1,*/
values: [ 1000, 300000000 ],
slide: function( event, ui ) {
if(ui.values[0]<=100000 && ui.values[1]<=100000){
$("#price-range").slider({step:10000});
}else if(ui.values[0]<=300000 && ui.values[1]<=300000){
$("#price-range").slider({step:25000});
}else if(ui.values[0]<=1000000 && ui.values[1]<=1000000){
$("#price-range").slider({step:50000});
}else if(ui.values[0]<=2000000 && ui.values[1]<=2000000){
$("#price-range").slider({step:100000});
}else if(ui.values[0]<=5000000 && ui.values[1]<=5000000){
$("#price-range").slider({step:250000});
}else if(ui.values[0]<=10000000 && ui.values[1]<=10000000){
$("#price-range").slider({step:500000});
}else if(ui.values[0]<=20000000 && ui.values[1]<=20000000){
$("#price-range").slider({step:1000000});
}else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){
$("#price-range").slider({step:5000000});
}else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){
$("#price-range").slider({step:10000000});
}else if(ui.values[0]<=200000000 && ui.values[1]<=200000000){
$("#price-range").slider({step:25000000});
}else{
$("#price-range").slider({step:100000000});
}
$("#mins").val( ui.values[0] );
$("#maxs").val( ui.values[1] );
}
});
Further to @Broshi's jsfiddle above, here is the code for a custom slider with range disabled:
jQuery:
var myData = [1,2,3,4,5,6,7,8,9,10,20,30,40,50,60,70,80,90,100,200,300,400,500,600,700,800,900,1000,2000,3000,4000,5000,10000,20000,30000,50000,100000,200000,500000,1000000,20000000,30000000];
slider_config = {
range: false,
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
// Set the real value into the inputs
console.log(ui);
$('#value').val( myData[ ui.value ] );
},
create: function() {
$(this).slider('value',0);
}
};
$("#slider").slider(slider_config);
HTML:
<input id="value" />
<div id="slider"></div>
참고URL : https://stackoverflow.com/questions/967372/jquery-slider-how-to-make-step-size-change
'programing' 카테고리의 다른 글
| Apache 로그 파일을 회전하는 가장 좋은 방법 (0) | 2020.11.18 |
|---|---|
| 디스어셈블러를 작성하는 방법? (0) | 2020.11.18 |
| Visual Studio에서 if 문 (HTML)과 같은 줄에 중괄호를 배치 할 수 있나요? (0) | 2020.11.18 |
| PyPi 다운로드 수가 비현실적으로 보입니다. (0) | 2020.11.18 |
| 다른 기능에 할당 된 여유 메모리? (0) | 2020.11.18 |