如何在不使用jquery-ui的情况下制作过滤器滑块
如何在不使用jquery-ui的情况下制作过滤器滑块
提问于 2019-03-18 05:27:41
因此，由于某些原因，我无法使用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就能实现呢？
回答 1
Stack Overflow用户
发布于 2019-03-18 06:11:31
尽管你可以找到更复杂的例子(像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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55212097
复制相关文章
相似问题
腾讯云开发者
