Как создать еще один входной диапазон для события Meteor

1

У меня есть этот элемент в моем HTML

<div class="slider-wrapper">
        <input type="range" min="-10" max="100" value="1" step="0.01">
    </div>

И мой JS

  'input input[type="range"]': function(event, template) {
            var sliderVal = $( event.currentTarget ).val();
            Session.set('scaler', sliderVal);
            console.log("Slider: " + sliderVal);
        }

Я попытался изменить имя класса моего элемента, чтобы добавить новый слайдер диапазона ввода, сопоставленный с новым событием, но он не работает. Как добавить еще один, изменив ввод [type = "range"] на шкалу [type = "range"] и изменить имя класса элемента, не будет работать.

  • 1
    Ваш вопрос кажется немного неясным. Пожалуйста, объясните четко, что именно вы действительно хотите. Вы намекаете, что хотите добавить несколько ползунков на основе первого ползунка?
  • 0
    Я просто хочу добавить еще один независимый слайдер и соответствующее событие.
Показать ещё 2 комментария
Теги:
meteor
events

2 ответа

1
Лучший ответ

Шаблон:

Каждому из ваших слайдеров присваивается уникальный идентификатор. Этот id - это то, что скажет один слайдер отдельно от другого.

<div class="slider-wrapper">
        <input type="range" min="-10" max="100" id="slider1" value="1" step="0.01">
        <input type="range" min="-10" max="100" id="slider2" value="1" step="0.01">
        <input type="range" min="-10" max="100" id="slider3" value="1" step="0.01">
</div>

Обработчики событий:

Один обработчик событий, который выполняет работу по сбору изменений на любом из ползунков.

// when anything in input[type="range"] changes, 

    'change  input[type="range"]' (event){

            console.log("id of the slider is: ", event.target.id);
            console.log("it current value is: ", event.target.value);
            // set the id and it value - which can be used later for whatever you want to do.
            Session.set(event.target.id, event.target.value);
    },

Session.get("slider1") ==> получает Slider1 значение тока Session.get("slider2") ==> получает slider2 значение тока Session.get("slider3") ==> Получает slider3 текущее значение

Поделиться
1

Ладно, похоже, что я отсутствовал хэштегом для селектора событий.

<div class="slider-wrapper">
        <input id="scale" type="range" min="-1" max="1" value="1" step="0.01">
    </div>
    <div class="slider-wrapper">
        <input id="offset" type="range" min="1" max="100" value="1" step="0.01">
    </div>

'input #scale[type="range"]': function(event, template) {
                var sliderVal = $( event.currentTarget ).val();
                Session.set('scaler', sliderVal);
                console.log("Slider: " + sliderVal);
            },

'input #offset[type="range"]': function(event, template) {
                var sliderVal = $( event.currentTarget ).val();
                Session.set('offset', sliderVal);
                console.log("Slider: " + sliderVal);
            }
Поделиться
  • 0
    Хорошая попытка, я чувствую, что вам не нужно объявлять прослушиватель событий для каждого слайдера. Один сделает работу за многих. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню