Слайдер пользовательского интерфейса jquery с противоположными значениями?

Прежде всего, я начинаю jquery, поэтому, пожалуйста, не сердитесь на мою нехватку знаний.

Я пытаюсь создать слайдер jquery, у которого он переключается на половину его ширины и два входа со значениями из слайдера, который работает определенным образом:

Если вы переместите переключатель ползунка влево, значение на входе #first уменьшается, а значение в #second увеличивается. Для правой стороны это обратная ситуация .. Итак, если я передвину ползунок вправо и поле #second получит (например) значение 30, #first получит значение 70.

Надеюсь, вы понимаете мою нужду ..

До сих пор мне удавалось переключиться в середину ползунка, и #first входов получает значение из ползунка.

Я не знаю, как двигаться дальше

Вы можете просмотреть и отредактировать ситуацию здесь: http://jsfiddle.net/M8AWg/

html:

<div class="container">
    <input type="text" id="first"/>
    <input type="text" id="second"/>
    <div id="slider"></div>
</div>

js:

$('#first, #second').val('50');

$(function() {
    $( "#slider" ).slider(
    { value: 50,
        slide: function( event, ui ) {
            $( "#first" ).val( ui.value );
            $(ui.value).val($('#first').val());
            }     
        }
    );
  });

slider jquery increment decrement
person dzordz    schedule 08.07.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Всегда ли сумма 100? Если да, вы можете просто добавить эту строку:

$( "#second" ).val( 100 - ui.value );

Глянь сюда:

http://jsfiddle.net/M8AWg/1/

person Ronnie    schedule 08.07.2013
comment
да, чувак, вот и все .... люблю тебя :) ... я приму твою ценность, как только смогу :), спасибо! - person dzordz; 08.07.2013

arrow_upward
1
arrow_downward

Используйте значение ползунка и минус 100, чтобы получить остаток. также $(ui.value) будет искать $(30), которого не существует

$(function() {
    $( "#slider" ).slider(
    { value: 50,
        slide: function( event, ui ) {
            $( "#first" ).val( ui.value );
            $('#second').val(100-ui.value);
            }     
        }
    );
  });

скрипка

person AbstractChaos    schedule 08.07.2013