Как в input вывести value range ползунков?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/pMjKeP

<div class="price-slider">
	<input value="0" min="0" max="100" step="0.5" type="range">
	<input value="100" min="0" max="100" step="0.5" type="range">
</div>

<div class="text-value">
  <input class="value-left" value="0">
  <input class="value-right" value="0">
</div>

const slider = $('.price-slider');
slider.on('input', updatePriceLabels);

function updatePriceLabels() {
    var sliders = slider.children('input');
    var x, y = 0;

    var val1 = parseInt(sliders[0].value);
    var val2 = parseInt(sliders[1].value);
    
    if (val1 >= val2) {
        sliders[1].value = val1 - 0;
        return; 
    }

Как выводить значения value ползунков в отдельном блоке ?

Comments

[WapSter]

Подключаться внутри функции к другому блоку и вносить значения. Покажите попытку сделать это отвечу точнее. И когда функция используется в событии стоит ее обзывать onName или handlerName

[Genri_Rus]

Тимур Турсунбаев, а может вы знаете, почему у меня один ползунок при наезжании на другой перемещается, а другой нет ?

Мне нужно, чтобы при наезжании (хоть левого ползунка, хоть правого), они переставали двигаться

[WapSter]

Genri_Rus, потому, что у вас условие распространяется только на один input

[Genri_Rus]

Тимур Турсунбаев, спасибо за ответ

А какое условие нужно добавить на второй input ?

Сколько пытался, почему-то все равно двигается

[WapSter]

Genri_Rus, оно получиться раздутое, и меня засмеют) лучший вариант разделить события для инпутов, и просто поменять знак в условии. Выложи код в песочницу.

[Genri_Rus]

Тимур Турсунбаев, вот: https://jsfiddle.net/Genri_Rus/q06y3ora/1/

[Genri_Rus]

Тимур Турсунбаев, а покажите примерно как это можно сделать ?

Вы имеете ввиду создать 2 функции и менять у них value ?

Answer 1

[Дмитрий]

const slider = $('.price-slider');
const val_outputs = [
  $('.left-range'),
  $('.right-range')
];
slider.on('input', updatePriceLabels);

function updatePriceLabels() {
    var sliders = slider.children('input');
    var x, y = 0;

    var val1 = parseInt(sliders[0].value);
    var val2 = parseInt(sliders[1].value);
    
    if (val1 >= val2) {
        sliders[1].value = val1 - 0;
        return; 
    }

   //....
  //после всех проверок 
    val_outputs[0].val(val1);
    val_outputs[1].val(val2);
}

Comments

[Genri_Rus]

Спасибо большое !

А может вы знаете, почему у меня один ползунок при наезжании на другой перемещается, а другой нет ?

Мне нужно, чтобы при наезжании (хоть левого ползунка, хоть правого), они переставали двигаться

[Дмитрий]

Genri_Rus, можно сделать что-то типа такого

....
    var val1 = parseInt(sliders[0].value);
    var val2 = parseInt(sliders[1].value);
    
    if (val1 >= val2 ||
        val2 <= val1) {
        sliders[0].value = val_outputs[0].val();
        sliders[1].value = val_outputs[1].val();
        return; 
    }
....

т.е. либо хранить где-то предыдущие значения отдельно, но т.к. они по идее сохранены уже в input полях, можно использовать их...конечно маленько колхоз имхо.

[Genri_Rus]

Дмитрий, спасибо, а вот допустим у меня нету input'ов, то тогда как можно сделать ?

P.S. И почему-то кружочки не всегда правильно наезжают друг на друга

[Genri_Rus]

Дмитрий, а вот еще такая проблема

Как заставить по клику двигать ползунки ?

У меня в стилях прописано:

.price-slider input {
    pointer-events: none;
}

Т.к если я уберу данное свойство - почему-то по клику двигается только один ползунок

[Genri_Rus]

Дмитрий, не подскажите ?

[Дмитрий]

Genri_Rus, дай подумать %)

[Дмитрий]

Genri_Rus, Как ты представляешь, что бы по клику двигались оба ползунка сразу?)

[Genri_Rus]

Дмитрий, ну по клику присваивать this и двигать 0 range и 1 range соответственно
Ну по клику двигать в зависимости от ползунка и this, их же 2 получается )

[Genri_Rus]

Дмитрий, я так понял ползунки типа range плохо поддаются js ?

[Genri_Rus]

Дмитрий, буду ждать )

P.S. Хотелось бы увидеть ваш вариант данного варианта

[Genri_Rus]

Дмитрий, вот еще вариант: https://jsfiddle.net/Genri_Rus/hoswfcdr/

Но там баг с ползунками, может этот вариант лучше ?