Как я могу сделать слайдер фильтра без использования 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?

Answer 1

Хотя вы можете найти гораздо более сложные примеры (например, это или даже это ) - это действительно простой пример, с которым вы можете поиграть:

// 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>