Как я могу сделать слайдер фильтра без использования JQuery-UI

Question

Как я могу сделать слайдер фильтра без использования JQuery-UI

Если вы получаете следующее исключение: «java.lang.SecurityException: информация о подписчике класса« org.hamcrest.Matchers »не соответствует информации о подписчиках других классов в одном пакете», убедитесь, Библиотека Junit в пути сборки. Вы можете настроить порядок в свойствах проекта в разделе «Путь сборки Java» на вкладке «Заказ и экспорт». нажмите ниже ссылку на изображение для большей ясности: http://i.stack.imgur.com/Y5R15.png

0

javascript jquery jquery-ui

задан ga4696 17 March 2019 в 21:27

1 ответ

score 0 · Answer 1

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

[118 ]

// 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);" />

Надежда, которая помогает и удачи!

<час>

РЕДАКТИРОВАТЬ:

Didn Я не совсем понимаю вашу проблему. Основываясь на твоей скрипке, я сделал что-то подобное:

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>

0

ответ дан A. Meshu 17 March 2019 в 21:27

Как я могу сделать слайдер фильтра без использования JQuery-UI

1 ответ

Похожие вопросы: