javascript - 如何在不使用 jquery-ui 的情况下制作过滤器滑块

Question

所以由于某种原因我无法使用 jQuery-ui。所以我有这个滑块jsfiddle，我想实现这个但不使用 jQuery-ui。

这是使用 jQuery-ui 的滑块代码：

import $ from "jquery";
import "jquery-ui";
import "jquery-ujs";

$(function () {
    $('.slider__container').slider({
        range: "max",
        min: 0,
        max: 100,
        value: 20,
        slide: function (event, ui) {
            $('#value').val( ui.value );
            filterSystem(ui.value);
        }
    })
});

function filterSystem(value) {
    $("em.match.js-match").hide().filter(function () {
        var length = parseInt($(this).attr("data-length"));
        return  value <= length;
    }).show();
}

在这里我有视图的 .haml 文件：

.slider.js-slider-filter
  %header.container__header


    .container__title
      %label{:for => "value"} Value:
      %input{:id => "value", :style => "border: 0; color: #f6931f; font-weight: bold;", :type => "text"}

    .container__extra
  .slider__container

是否有可能只使用 jQuery 来获得这个？

标签： javascriptjqueryjquery-ui

Answer 1

尽管您可以找到更复杂的示例（例如this甚至this） - 这是一个非常基本的示例，您可以使用：

// Select DOM elements
var rangeSlider = document.getElementById('range');
var textInput = document.getElementById('textInput');

// Add event listeners
rangeSlider.addEventListener('mouseup', function() {
  textInput.style.visibility = 'hidden';
});
rangeSlider.addEventListener('mousedown', function() {
  textInput.style.visibility = 'visible';
});

function updateTextInput(val) {
  textInput.value = val;
}

#textInput { visibility: hidden; }

<div>
  <input type="text" id="textInput" value="" />
</div>
<input id="range" type="range" min="0" max="100" oninput="updateTextInput(this.value);" />

希望有帮助，祝你好运！

---

编辑：

没有完全理解你的问题。根据你的小提琴，我做了这样的事情：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var result = document.getElementById('result');
output.innerHTML = slider.value;
filterSystem();
slider.oninput = function() {
  output.innerHTML = this.value;  
  filterSystem();
}

 function filterSystem() {
  var currentMatch = document.querySelectorAll('.js-match');
  for (var i=0; i<currentMatch.length; i++) {
	currentMatch[i].style.display = 'none';
	currentMatch[parseInt(output.innerHTML)-1].style.display = 'block';
  }
  result.textContent = 'This has '+output.innerHTML+' characters. It says:';
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.js-match {display: none;}

<h1>Round Range Slider</h1>

<div class="""slidecontainer">
  <input type="range" min="1" max="5" value="2" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
  <p id="result"></p>  
</div>

<div class="document__body">
  <p class="js-match" data-length="1">1</p>
  <p class="js-match" data-length="2">22</p>
  <p class="js-match" data-length="3">333</p>
  <p class="js-match" data-length="4">4444</p>
  <p class="js-match" data-length="5">55555</p>
</div>