Ползунок выбора диапазона на jQuery

Интерактивный элемент всегда привлекает внимание пользователя. Именно поэтому ползунок выбора диапазона используется в любом развивающемся интернет-магазине. В данной статье рассмотрим как реализовать такой ползунок с помощью nouislider.

Для начала нужно подключить библиотеку ползунков и ее стили. Скачать их можно на сайте данного слайдера https://refreshless.com/nouislider/.

<link rel="stylesheet" href="путь к вашему шаблону/nouislider.min.css">
<script src="путь к вашему шаблону/nouislider.min.js"></script>

1 2	<link rel="stylesheet" href="путь к вашему шаблону/nouislider.min.css"> <script src="путь к вашему шаблону/nouislider.min.js"></script>

После этого создадим разметку для ползунка:

<div class="filter">
  <div data-current-min-value="50000" data-current-max-value="100000" data-min-value="459" data-max-value="211001" class="range-widget js-range">
     <div class="range-widget__slider"></div>
     <div class="range-widget__row">
        <div class="range-widget__col"> 
           <div class="range-widget__input-wrapper range-widget__input-wrapper--type_simple">
              <input type="text" value="459" name="arrFilter_P1_MIN" class="range-widget-min range-widget__input">
           </div>
        </div>
        <div class="range-widget__col">
           <div class="range-widget__input-wrapper range-widget__input-wrapper--type_simple">
              <input type="text" value="211001" name="arrFilter_P1_MAX" class="range-widget-max range-widget__input">
           </div>
        </div>
     </div>
  </div>
</div>

</div>

</div>

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

 var $navRange = $('.js-range');

    $navRange.each(function () {
      var min = parseInt($(this).data('minValue') || 0),
          max = parseInt($(this).data('maxValue') || 1000),
          currentMin = parseInt($(this).data('currentMinValue') || 0),
          currentMax = parseInt($(this).data('currentMaxValue') || 0),
          $inputMin = $(this).find('.range-widget-min'),
          $inputMax = $(this).find('.range-widget-max'),
          $slider = $(this).find('.range-widget__slider');


      if($inputMin.length && $inputMax.length && $slider.length) {
        var inputs = [$inputMin[0], $inputMax[0]],
            keypressSlider = $slider[0];

        noUiSlider.create(keypressSlider, {
          start: [currentMin, currentMax],
          connect: true,
          direction: 'ltr',
          range: {
            'min': min,
            'max': max
          }
        });

        keypressSlider.noUiSlider.on('update', function( values, handle ) {
          inputs[handle].value = parseInt(values[handle]);
        });
      }

    });

var $navRange = $('.js-range');

$navRange.each(function () {

var min = parseInt($(this).data('minValue') || 0),

max = parseInt($(this).data('maxValue') || 1000),

currentMin = parseInt($(this).data('currentMinValue') || 0),

currentMax = parseInt($(this).data('currentMaxValue') || 0),

$inputMin = $(this).find('.range-widget-min'),

$inputMax = $(this).find('.range-widget-max'),

$slider = $(this).find('.range-widget__slider');

if($inputMin.length && $inputMax.length && $slider.length) {

var inputs = [$inputMin[0], $inputMax[0]],

keypressSlider = $slider[0];

noUiSlider.create(keypressSlider, {

start: [currentMin, currentMax],

connect: true,

direction: 'ltr',

range: {

'min': min,

'max': max

}

});

keypressSlider.noUiSlider.on('update', function( values, handle ) {

inputs[handle].value = parseInt(values[handle]);

});

}

});

И стили т.к. вид ползунка по умолчанию не очень симпотичный:

 .filter {
  max-width: 320px;
  padding: 30px;
  font-size: 0;
}

.range-widget {
  font-family: 'ProximaNova', sans-serif;
  line-height: 1.2;
}
.range-widget__row:after {
  display: table;
  clear: both;
  content: '';
}
.range-widget__col {
  float: left;
  width: 50%;
  padding: 0 0 0 10px;
}
.range-widget__col:first-child {
  padding: 0 10px 0 0;
}
.range-widget__slider {
  margin: 0 0 18px;
}
.range-widget__input {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 36px;
  color: #000;
  font-size: 14px;
  line-height: 36px;
  outline: 0 none;
  border: 0 none;
  background: transparent;
}
.range-widget__input::-webkit-input-placeholder {
  color: #97979e;
  font-size: 14px;
}
.range-widget__input::-moz-placeholder {
  color: #97979e;
  font-size: 14px;
  opacity: 1;
}
.range-widget__input:-moz-placeholder {
  color: #97979e;
  font-size: 14px;
}
.range-widget__input:-ms-input-placeholder {
  color: #97979e;
  font-size: 14px;
}
.range-widget__input-prefix {
  float: left;
  display: block;
  width: 36px;
  height: 36px;
  margin-left: -36px;
  color: #000;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}
.range-widget__input-wrapper {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 36px;
  line-height: 1;
  text-align: left;
  border-radius: 20px;
  border: 2px solid #dddee2;
  background: #fff;
  max-width: 200px;
}
.range-widget__input-wrapper--type_simple {
  padding: 0 16px;
}
.range-widget .noUi-horizontal {
  height: 4px;
  border-radius: 2px;
  border: 0 none;
  box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0,0,0,0.15);
}
.range-widget .noUi-connect {
  border-radius: 2px;
  background: #099aff;
  box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(121,139,81,0.49);
}
.range-widget .noUi-horizontal .noUi-handle {
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  outline: 0 none;
  border: 0 none;
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(bottom, rgba(121,139,81,0.09) 0%, rgba(121,139,81,0) 100%);
  background-image: linear-gradient(to top, rgba(121,139,81,0.09) 0%, rgba(121,139,81,0) 100%);
  box-shadow: 0 1px 3px rgba(121,139,81,0.61);
}
.range-widget .noUi-horizontal .noUi-handle:before,
.range-widget .noUi-horizontal .noUi-handle:after {
  display: none;
}

100

101

102

103

104

105

106

107

108

.filter {

max-width: 320px;

padding: 30px;

font-size: 0;

}

.range-widget {

font-family: 'ProximaNova', sans-serif;

line-height: 1.2;

}

.range-widget__row:after {

display: table;

clear: both;

content: '';

}

.range-widget__col {

float: left;

width: 50%;

padding: 0 0 0 10px;

}

.range-widget__col:first-child {

padding: 0 10px 0 0;

}

.range-widget__slider {

margin: 0 0 18px;

}

.range-widget__input {

display: inline-block;

vertical-align: middle;

width: 100%;

height: 36px;

color: #000;

font-size: 14px;

line-height: 36px;

outline: 0 none;

border: 0 none;

background: transparent;

}

.range-widget__input::-webkit-input-placeholder {

color: #97979e;

font-size: 14px;

}

.range-widget__input::-moz-placeholder {

color: #97979e;

font-size: 14px;

opacity: 1;

}

.range-widget__input:-moz-placeholder {

color: #97979e;

font-size: 14px;

}

.range-widget__input:-ms-input-placeholder {

color: #97979e;

font-size: 14px;

}

.range-widget__input-prefix {

float: left;

display: block;

width: 36px;

height: 36px;

margin-left: -36px;

color: #000;

font-size: 14px;

line-height: 36px;

text-align: center;

}

.range-widget__input-wrapper {

width: 100%;

height: 40px;

padding: 0 16px 0 36px;

line-height: 1;

text-align: left;

border-radius: 20px;

border: 2px solid #dddee2;

background: #fff;

max-width: 200px;

}

.range-widget__input-wrapper--type_simple {

padding: 0 16px;

}

.range-widget .noUi-horizontal {

height: 4px;

border-radius: 2px;

border: 0 none;

box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0,0,0,0.15);

}

.range-widget .noUi-connect {

border-radius: 2px;

background: #099aff;

box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(121,139,81,0.49);

}

.range-widget .noUi-horizontal .noUi-handle {

left: -7px;

top: -7px;

width: 14px;

height: 14px;

border-radius: 50%;

outline: 0 none;

border: 0 none;

background-color: #f5f5f5;

background-image: -webkit-linear-gradient(bottom, rgba(121,139,81,0.09) 0%, rgba(121,139,81,0) 100%);

background-image: linear-gradient(to top, rgba(121,139,81,0.09) 0%, rgba(121,139,81,0) 100%);

box-shadow: 0 1px 3px rgba(121,139,81,0.61);

}

.range-widget .noUi-horizontal .noUi-handle:before,

.range-widget .noUi-horizontal .noUi-handle:after {

display: none;

}

Конец.

Как найти и удалить вирусы на сайте?

Вставка включаемых областей в Битрикс

Интеграция верстки в WordPress

Как сделать бэкап сайта и восстановиться из копии?

Ползунок выбора диапазона на jQuery