input range значения над полосой [дубликат]

#javascript #html #jquery #css

        
             
                
                    
                        
                            This question already has answers here:
                            
                        
                    
                
                        
                            Стилизация input range
                                
                                    (2 ответа)
                                
                        
                                Закрыт 1 год назад.
            
                    
подскажите, как можно сделать, чтобы выбирались только цифры из datalist ? и можно
ли их поставить над инпутом в линию, чтобы каждая цифра соответствовала значению инпута


                            

    

Ответы

Ответ 1

Рассказываю, в чем суть: вначале мы создаем массив из значений . Далее навешиваем
на ползунок событие при его перемещении. При каждом его движении получаем его значение
и создаем новый массив из (!!!) модулей разности этого значения с каждым значением
из массива  (values). Это нужно, чтобы понять к какому значению  мы
сейчас ближе всего (к какому начали движение). Чтобы узнать точно куда мы должны прийти
вычисляем минимальное значение массива этих разностей и получаем (!) всего лишь минимальную
разность (расстояние до ближайшей точки остановки). Но индекс под которым это значение
лежит в массиве разностей и есть индекс значения массива values к которому мы движемся.
Соответственно это значение мы и применяем сразу же после начала движения. Все.

Выполните код, чтобы попробовать его в деле. Раскомментируйте логи, чтобы понять,
что происходит.



let values = [];

$("datalist > option").each((index, item) => {
	values.push($(item).html());
});

let min = (obj) => {
    var a = obj[0];
    for (var i = 1; i < obj.length; i++) {
        if (obj[i] < a) {
            a = obj[i];
        }
    }
    return a;
}

$("input[type='range']").on("input", (e) => {
	let element = $(e.currentTarget);
  let value = element.val();
  
  let differenceArr = [];
  values.forEach((item, index) => {
  	differenceArr.push(Math.abs(item - value));
  });
  //console.log(differenceArr);
  let minDifferense = min(differenceArr);
  //console.log(minDifferense);
  let newValue = values[differenceArr.indexOf(minDifferense)];
  //console.log(newValue);
  element.val(newValue);
});