jQuery Изменение значений ползунка соответственно

Создаю 3 слайдера, [Slider 1, Slider 2, Slider 3], и они работают отлично индивидуально. но я хочу, чтобы они зависели друг от друга и работали соответственно с основным слайдером.jQuery Изменение значений ползунка соответственно

Вы можете увидеть мои демо здесь: JSFIDDLE

Главный слайдер слайдер 1, а другой слайдер 2 и ползун 3 находятся в зависимости от ползунка 1. Если слайдера 1. Увеличим значение (когда мы скользят ползунок), то ползунок 2-х и значение слайдера 3 также должно увеличиться. и так же, как при уменьшении значения.

Вторая точка: если мы устанавливаем ползунок от 1 до 100, а затем ползунок 2 и 3 также при значении 100 (автоматически), то 100 - мин. значение ползунка 2 и 3. при коротком значении ползунка 1 - минимальное значение ползунка 2 и 3.

Для примера: ползунок 1 установлен в 500, тогда ползунок 2 и 3 может скользить для увеличения до более 500, но не может уменьшить ниже, чем 500.

вот пример моего кода

<div id="slider1"></div><br> 
<div id="slider2"></div><br> 
<div id="slider3"></div><br> 
Slider 1 : <div id="value1"></div><br> 
Slider 2 : <div id="value2"></div><br> 
Slider 3 : <div id="value3"></div><br>

JQuery

$(function() { 
    $("#slider1").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
     $("#value1").text(ui.value); 
     $("#slider2").slider('option',{min: ui.value}); 
     $("#slider2").slider('value',ui.value); 
     $("#slider3").slider('option',{min: ui.value}); 
     } 
    }); 
    }); 

$(function() { 
    $("#slider2").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
      $("#value2").text(ui.value); 
      $("#value2").val("$" + $("#slider2").slider("value")); 
     $("#amount").val("$" + ui.value); 
     } 
    }); 
    }); 

$(function() { 
    $("#slider3").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
      $("#value3").text(ui.value); 
      $("#value3").val("$" + $("#slider3").slider("value")); 
     $("#amount").val("$" + ui.value); 
     } 
    }); 
    });

источник

2013-11-23 Shivam Pandya

Вы не должны использовать min вариант от ползунка. Использование return false на событие слайд, когда значение будет ниже, чем slider1

Example in jsfiddle

Полный код:

$(function() { 
    $("#slider1").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
     $("#value1").text(ui.value); 
     $('#value2').text(ui.value); // slider 2 text 
     $('#value3').text(ui.value); // slider 3 text 
     $("#slider2").slider('value',ui.value); 
     $('#slider3').slider('value',ui.value); 
     //$("#slider2").slider('option',{min: ui.value}); remove this 
     //$("#slider3").slider('option',{min: ui.value}); 
     } 
    }); 


    $("#slider2").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
      if(ui.value < $('#slider1').slider('value')){ // if the value is lower than slider 1 
       return false; // don't slide 
      } 
      $("#value2").text(ui.value); 
      $("#value2").val("$" + $("#slider2").slider("value")); 
      $("#amount").val("$" + ui.value); 

     } 
    }); 

    $("#slider3").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
      if(ui.value < $('#slider1').slider('value')){ // if the value is lower than slider 1 
       return false; // don't slide 
      } 
      $("#value3").text(ui.value); 
      $("#value3").val("$" + $("#slider3").slider("value")); 
      $("#amount").val("$" + ui.value); 
     } 
    }); 
});

источник

2013-11-23 09:43:35 Wilq

Ага, именно то, что я хочу. Спасибо друг –

Я сделал некоторые ч ange к вашему коду. В принципе, установка минимального значения не изменит положение ползунка, вы можете установить значение, когда ползунок все оставлен. В этом примере ползунок 2 устанавливает минимальное значение в зависимости от значения текущего слайдера1. Ползунок 3 устанавливает минимальное значение в зависимости от значения текущего слайдера1.

Вы можете немного оптимизировать, но я думаю, что это то, чего вы хотите достичь!

//min value of slider 2 = current value of slider 1 
$("#slider2").slider('option',{min: ui.value}); 
//slider 3 cannot be under slider 1 
if($("#slider3").slider("value") < ui.value) 
    $("#slider3").slider('option',{value: ui.value});

Check it here

источник

2013-11-23 09:39:53 nobe4

Его сделано, я хочу, вы можете видеть в принятых ответах, но я ценю, что вы помогаете.спасибо –

это немного грязный ... в любом случае я надеюсь, что это может помочь вам:

$(function() { 
    $("#slider1").slider({ 
     value:100, 
     min: 0, 
     max: 500, 
     step: 50, 
     slide: function(event, ui) { 
     $("#value1").text(ui.value); 
     if(ui.value%100 == 0) 
     { 
      $("#slider2").slider('option',0); 
     $("#slider2").slider('value',0); 
     $("#slider3").slider('option',0); 
     } 
     else{ 
      $("#slider2").slider('option',{min: ui.value}); 
     $("#slider2").slider('value',ui.value); 
     $("#slider3").slider('option',{min: ui.value}); 
     } 

     } 
    }); 
    });

источник

2013-11-23 09:42:56

Его сделано, я хочу, вы можете видеть в принятых ответах, но я ценю, что вы помогаете. спасибо –

только чтобы подчеркнуть важный момент, я просто понял, что принимает только Целые значения на эта команда:

$("#slider2").slider('value',IntValue);

Итак, если вам нужно изменить свое значение на pa ssing ввода текста, то вы должны бросить это так:

parseInt($("#input_text_slider2").val())

так что вы способны поставить это значение, используя переменную IntValue выше.

источник

2014-10-31 13:13:41

jQuery Изменение значений ползунка соответственно

ответ

Смежные вопросы