html 离子范围滑块

Posted 2021-05-11

var $range = $("#price-filter"),
    $from = $("#min-cost"),
    $to = $("#max-cost"),
    range,
    min = 0,
    max = 100000,
    from,
    to;
var updateValues = function () {
    $from.prop("value", from);
    $to.prop("value", to);
};
$range.ionRangeSlider({
  type: "double",
  min: min,
  max: max,
  hide_min_max: true,
  force_edges: true,
  prettify_enabled: false,
  onChange: function (data) {
    from = data.from;
    to = data.to;
    updateValues();
  }
});
range = $range.data("ionRangeSlider");
var updateRange = function () {
  range.update({
    from: from,
    to: to
  });
};
$from.on("change", function () {
  from = +$(this).prop("value");
  if (from < min) {
    from = min;
  }
  if (from > to) {
    from = to;
  }
  updateValues();    
  updateRange();
});
$to.on("change", function () {
  to = +$(this).prop("value");
  if (to > max) {
      to = max;
  }
  if (to < from) {
      to = from;
  }
  updateValues();    
  updateRange();
});

//для нескольких слайдеров
var rangeSlider = $('.js-ion-range-slider'),
        rangeSliderFrom = rangeSlider.closest('.form-group').find('.js-range-min'),
        rangeSliderTo = rangeSlider.closest('.form-group').find('.js-range-max'),
        rangeSliderMin = rangeSlider.data('min'),
        rangeSliderMax = rangeSlider.data('max'),
        range,
        from,
        to;
    var updateValues = function (elem) {
        rangeSlider = $(elem);
        rangeSliderFrom = $(elem).closest('.form-group').find('.js-range-min');
        rangeSliderTo = $(elem).closest('.form-group').find('.js-range-max');
        $(rangeSliderFrom).prop("value", from);
        $(rangeSliderTo).prop("value", to);
    };
    rangeSlider.ionRangeSlider({
        type: "double",
        hide_min_max: true,
        force_edges: true,
        prettify_enabled: false,
        onChange: function (data) {
            from = data.from;
            to = data.to;
            updateValues(data.input);
        }
    });
    range = rangeSlider.data("ionRangeSlider");
    var updateRange = function (from, to) {
        range.update({
            from: from,
            to: to
        });
    };
    $(rangeSliderFrom).on("change", function (event) {
        to = $(event.target).closest('.form-group').find('.js-range-max').prop("value");
        from = +$(this).prop("value");
        if (from < rangeSliderMin) {
            from = rangeSliderMin;
        }
        if (from > rangeSliderMax) {
            from = rangeSliderMax;
        }
        if (to >= 1 && from > to) {
            from = to;
        }
        var target = $(event.target).closest('.form-group').find('.js-ion-range-slider');
        updateValues(target);
        range = $(target).data("ionRangeSlider");
        updateRange(from, to);
    });
    $(rangeSliderTo).on("change", function (event) {
        from = $(event.target).closest('.form-group').find('.js-range-min').prop("value");
        to = +$(this).prop("value");
        if (to > rangeSliderMax) {
            to = rangeSliderMax;
        }
        if (to < rangeSliderMin) {
            to = rangeSliderMin;
        }
        if (from >= 1 && to < from) {
            to = from;
        }
        var target = $(event.target).closest('.form-group').find('.js-ion-range-slider');
        updateValues(target);
        range = $(target).data("ionRangeSlider");
        updateRange(from, to);
    });


//кнопка сброса фильтра
    var slider = $range.data("ionRangeSlider");
    $('#js-reset').click(function () {
      $($from).val(0);
      $($to).val(100000);
      slider.reset();
    });

.irs {
    height: 40px;
    &-line {
      top: 6px;
      border-top: 1px solid #dbdbdc;
      border-bottom: 1px solid #dbdbdc;
      width: 100%;
      height: 1px;
      background-color: #57585b;
    }
    &-bar {
      top: 8px;
      height: 7px;
      background-color: #9e9fa2;
    }
    &-single,
    &-from,
    &-to {
      top: 20px;
      border-radius: 8px;
      padding: 0 10px;
      height: 16px;
      font-size: 10px;
      line-height: 16px;
      text-align: center;
      color: #ffffff;
      background-color: #898b8f;
      cursor: pointer;
      &:before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        z-index: 1;
        display: block;
        margin-left: -8px;
        width: 16px;
        height: 15px;
        background-image: url(../img/ico-arrow-down-dark.png);
        background-repeat: no-repeat;
        background-position: 0 0;
      }
    }
  }

<input id="min-cost" type="text" value="0">
<input id="max-cost"  type="text" value="100000">
<input type="text" id="price-filter">

<!--несколько слайдеров-->

                            <div class="form-group">
                                <label class="label">Угол кончика пуансона</label>
                                <div class="row">
                                    <div class="col-6">
                                        <input id="min-deg" type="text" value="" placeholder="- от"
                                               class="form-control form-control-sm js-range-min" data-min="0">
                                    </div>
                                    <div class="col-6">
                                        <input id="max-deg" type="text" value="" placeholder="- до"
                                               class="form-control form-control-sm js-range-max" data-max="90">
                                    </div>
                                </div>
                                <input type="text" id="deg" class="js-ion-range-slider form-control-range-slider" data-min="1"
                                       data-max="90">
                            </div>
                            <div class="form-group">
                                <label class="label">Полезная высота</label>
                                <div class="row">
                                    <div class="col-6">
                                        <input id="min-height" type="text" value="" placeholder="- от"
                                               class="form-control form-control-sm js-range-min" data-min="0">
                                    </div>
                                    <div class="col-6">
                                        <input id="max-height" type="text" value="" placeholder="- до"
                                               class="form-control form-control-sm js-range-max" data-max="1000">
                                    </div>
                                </div>
                                <input type="text" id="height" class="js-ion-range-slider form-control-range-slider" data-min="1"
                                       data-max="100">
                            </div>