Как правильно реализовывать элемент ввода диапазона с двумя слайдерами?

Question

[Сергей Золотарёв]

Доброго утра!
На данный момент решаю трудный вопрос, связанный с этим основанием вопроса:

На меня висит задача реализовать элемент ввода диапазона с двумя слайдерами. Воспользуясь ответами из CSS Tricks и stackOverflow в соответствии с условиями задачи, но получилось так, когда элемент ввода минимального диапазона отлично выводится и работает, а максимального - сильно прячется, но он тоже работает.

• Как решить этот вопрос?
  
• Что нужно сделать, чтобы слайдер в элементе ввода максимального диапазона был отлично вложен в элемент ввода минимального диапазона, работая также замечательно?
  
• А вы с этим сталкивались?
  

Заранее вам спасибо!

Answer 1

[Pashok Doom]

https://jqueryui.com/slider/#multiple-vertical
Есть готовые варианты

Comments

[Сергей Золотарёв]

Pashok Doom , ещё в чем фишка:

Чтобы при смене значений в поле текстового ввода, менялось значение и в элементах ввода диапазонов.
А JQuery UI позволяет это сделать?
Мне нужны только варианты без JQuery UI!

[Сергей Золотарёв]

Pashok Doom, скрипт у меня построен так:

const RangeInput = () => {
    var rangetext = [
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(1) .content-form input#from'),
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(1) .content-form input#to')
    ];
    var rangeeventext = [
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(2) .content-form input#from'),
        $('.objects-adding-search > footer #left-content .input-from-to:nth-child(2) .content-form input#to')
    ];
    var range = [
        $('.objects-adding-search > footer #right-content .range-form:nth-child(1) input[type="range"]#min'),
        $('.objects-adding-search > footer #right-content .range-form:nth-child(1) input[type="range"]#max')
    ];
    var evenrange = [
        $('.objects-adding-search > footer #right-content .range-form:nth-child(2) input[type="range"]#min'),
        $('.objects-adding-search > footer #right-content .range-form:nth-child(2) input[type="range"]#max')
    ];

    for (let i = 0; i < range.length; i++) {
        const a = range[i],
              b = evenrange[i],
              d = rangeeventext[i];


        a.bind('input', function (e) {
                var val = $(this).val();
                var curmax = rangetext[i];
                var query;
                query = val + " m2";
                curmax.val(query);
        });
        b.bind('input', function (e) {
                var val = $(this).val();
                var curmax = d;
                var query;
                query = val;
                curmax.val(query);
        });
        
        
    }

    for (let i = 0; i < range.length; i++) {
      rangetext[i].bind('input change', function (e,t) {
          const v = $(this).val(),
                r = range[i];
          let rangeFigure;

          if (v.indexOf(" m2") != -1) { rangeFigure = parseInt(v.slice(0,-3)); } 
          else { rangeFigure = parseInt(v); }

          r.val(rangeFigure);
          $(this).val(rangeFigure + ' m2');
      });
        
    }
    for (let i = 0; i < evenrange.length; i++) {
        rangeeventext[i].bind('input change', function (e,t) {
            const v = $(this).val(),
            r = evenrange[i];

            r.val(parseInt(v));
        });
    }


}
$(document).ready(function () {
    RangeInput();
});