jquery - 范围滑块，如詹姆斯艾伦

问题描述

我试图构建一个像 jamesallen.com 这样的范围滑块，并在 StackOverflow 上第三次提出问题，但仍然没有运气。我也见过 RC-slider 但也有同样的问题。

有人可以帮助我实现同样的目标吗？

https://www.jamesallen.com/loose-diamonds/all-diamonds

我需要 jQuery。

$(document).ready(function() {
  // var custom_values = ['F', 'G', 'VG', 'EX'];
  // var cut_values = ['F', 'G', 'VG', 'EX'];
  //    // cut rang start here
  //    var my_from = custom_values.indexOf('F');
  //    var my_to = custom_values.indexOf('EX');

  var custom_values = ['F', 'FAIR', 'GOOD', 'VERY GOOD', 'EXCELLENT'];
  var cut_values = ['F', 'FAIR', 'GOOD', 'VERY GOOD', 'EXCELLENT'];
  // cut rang start here
  var my_from = custom_values.indexOf('F');
  var my_to = custom_values.indexOf('EXCELLENT');

  cutslider = $(".js-range-slider_cut").ionRangeSlider({
    type: "double",
    grid: true,
    skin: "round",
    from: my_from,
    to: my_to,
    values: custom_values,
    from_max: my_to - 1,
    to_min: my_from + 1,
    onStart: function(data) {
      $(".js-irs-0").find('.irs-min').html('FAIR')
      var spn = $("#cut_filter").parent()[0];
      var len_cut = custom_values.length;
      for (var i = 0; i < len_cut; i++)
        $(spn).find('.js-grid-text-' + i).addClass('cut_text_margin' + i);
      // var sliced = cut_values.slice(cut_values.indexOf(data.from_value), cut_values.indexOf(data.to_value)+1); //will contain ['a', 'b', 'c']
      // $("#cut_filter").val(sliced); 
      var sliced = '';
      if (cut_values.indexOf(data.from_value) == 1)
        sliced = cut_values.slice(cut_values.indexOf(data.from_value) + 1, cut_values.indexOf(data.to_value) + 1); // 
      else(cut_values.indexOf(data.from_value) == 2)
      sliced = cut_values.slice(cut_values.indexOf(data.from_value) + 1, cut_values.indexOf(data.to_value) + 1);

      sliced = sort_filter(sliced, 'FAIR', 'F');
      sliced = sort_filter(sliced, 'GOOD', 'G');
      sliced = sort_filter(sliced, 'VERY GOOD', 'VG');
      sliced = sort_filter(sliced, 'EXCELLENT', 'EX');
      $("#cut_filter").val(sliced);
    },

    onFinish: function(data) {
      // var sliced = cut_values.slice(cut_values.indexOf(data.from_value), cut_values.indexOf(data.to_value)+1); //will contain ['a', 'b', 'c']
      if (data.from < data.to) {
        $(".js-irs-0").find('.irs-min').html('FAIR')
        var sliced = '';
        if (cut_values.indexOf(data.from_value) == 1)
          sliced = cut_values.slice(cut_values.indexOf(data.from_value) + 1, cut_values.indexOf(data.to_value) + 1); // 
        else(cut_values.indexOf(data.from_value) == 2)
        sliced = cut_values.slice(cut_values.indexOf(data.from_value) + 1, cut_values.indexOf(data.to_value) + 1);

        //making label text bold and light after selection 
        var spn = $("#cut_filter").parent()[0];
        var len = custom_values.length;
        var span_text = '';
        for (var i = 0; i < len; i++) {
          span_text = $(spn).find('.js-grid-text-' + i).text()
          if (jQuery.inArray(span_text, sliced) !== -1)
            $(spn).find('.js-grid-text-' + i).removeClass('colorin');
          else
            $(spn).find('.js-grid-text-' + i).addClass('colorin');
        }

        sliced = sort_filter(sliced, 'FAIR', 'F');
        sliced = sort_filter(sliced, 'GOOD', 'G');
        sliced = sort_filter(sliced, 'VERY GOOD', 'VG');
        sliced = sort_filter(sliced, 'EXCELLENT', 'EX');
        $("#cut_filter").val(sliced);
        updateSliderHandelsRestriction('.js-range-slider_cut', data.from, data.to);
      } else {

      }
    }
  });

  // find and replace diamond filter value accordingly 
  function sort_filter(bunch = '', key = '', val = '') {
    if (bunch != '')
      var index = bunch.indexOf(key);
    if (index !== -1)
      bunch[index] = val;
    return bunch;
  }

  function updateSliderHandelsRestriction(slider, f, t) {
    var instance = $(slider).data("ionRangeSlider");
    instance.options['from_max'] = t - 1;
    instance.options['to_min'] = f + 1;
  }

});

/** -- margin bw cut text **/
.cut_text_margin0 {
  display: none !important;
}

.cut_text_margin1 {
  left: 14.5% !important;
}

.cut_text_margin2 {
  left: 38% !important;
}

.cut_text_margin3 {
  left: 63% !important;
}

.cut_text_margin4 {
  left: 87% !important;
}



/*span.irs-grid:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(white,white) 24.6% 0/5px 100%, linear-gradient(white,white) 50% 0/5px 100%, linear-gradient(white,white) 75.7% 0/5px 100%, linear-gradient(white,white) 100% 0/5px 100%;
    background-repeat: no-repeat;
}*/


.col_2 .irs--round .irs-line:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(white, white) 26% 0/5px 100%, linear-gradient(white, white) 50% 0/5px 100%, linear-gradient(white, white) 74% 0/5px 100%, linear-gradient(white, white) 100% 0/5px 100%;
  background-repeat: no-repeat;
}


.col_2 .irs--round .irs-bar:after {
  content: "";
  width: 100%;
  display: block;
  border: 1px solid transparent;
  position: absolute;
  height: 29px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" rel="stylesheet"/>

<div class="d_box2 tst1 col-sm-12 col-md-12 col-lg-12 col-xs-12 no-padding1 col_2">
  <input type="text" class="js-range-slider_cut" name="my_range2" value="" />
  <input type="hidden" class="" id="cut_filter" value="" />
</div>

<br />
<br />
<br /><br /><br />
<input type="text" id="cut_filter" />

这是我尝试过的小提琴，但问题是它在我点击时滑动，但我需要它只在我点击文本或中间间隙时滑动。就像 jamesallen.com

我尝试过的所有滑块都面临同样的问题，每当我点击两个标签之间的线时，它就会滑动，这是我不想要的。请检查 jamesallen 共享参考链接的剪切滑块。

标签： jqueryhtmlcssrangeslider

jquery - 范围滑块，如詹姆斯艾伦

问题描述

解决方案

推荐阅读