#javascript #jquery #css #html #rangeslider
#javascript #jquery #css #HTML #rangeslider
Вопрос:
Требование:
Необходимо добавить пользовательские числовые шкалы к ползунку диапазона изRangeslider.js плагин, так что всякий раз, когда он скользит по горизонтальной линии, ему необходимо отображать выбранный диапазон чисел с консоли
Фактические результаты:
Всякий раз, когда я пытался добавить пользовательские числа, весь дизайн, включая маркер, разрушался. Ниже приведены коды фрагмента, в который необходимо добавить пользовательские числовые шкалы
Код, который я:
init(1, 10);
function init(min, max) {
$("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" min "' max='" max "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
$('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js")
.done(function(script, textStatus) {
console.log(textStatus);
//Preform here
initRangeSlider($("#slider"));
});
}
function initRangeSlider(ele) {
ele.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {
//valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' position, 'value: ' value);
},
// Callback function
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' position, 'value: ' value);
}
});
}
.rangeslider--horizontal {
height: 6px !important;
width: 66% !important;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>Range Slider</b><br/>
<div id='io'></div><br/><br/>
Код II:
Приведенный ниже код фрагментов, похоже, не подходит для моего проекта. Это был мой фактический результат, когда я пытался интегрировать. Итак, мне нужно изменить приведенный выше код I с помощью приведенных ниже фрагментов кода II
var $r = $('input[type="range"]');
var $ruler = $('<div class="rangeslider__ruler" />');
// Initialize
$r.rangeslider({
polyfill: false,
onInit: function() {
$ruler[0].innerHTML = getRulerRange(this.min, this.max, this.step);
this.$range.prepend($ruler);
}
});
function getRulerRange(min, max, step) {
var range = '';
var i = 0;
while (i <= max) {
range = i ' ';
i = i step;
}
return range;
}
.rangeslider,
input[type='range'] {
max-width: 400px;
height: 6px !important;
width: 66% !important;
float: center !important;
}
.rangeslider__ruler {
cursor: pointer;
font-size: .7em;
margin: 20px 3px 0 3px;
position: relative;
top: 100%;
text-align: justify;
}
// Workaround to justify only one-line.
// Extra element to force a new line.
.rangeslider__ruler:after {
content: "";
display: inline-block;
width: 100%;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
background-image: url('data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI PGRlZnM PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8 PC9saW5lYXJHcmFkaWVudD48L2RlZnM PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" integrity="sha256-F8gzbY2A1VTf49iOrc8Lst/UvcUtoFr3myix0WMiNqA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js" integrity="sha256-vFhEtGnaQ2xB yjBTSXxssthNcfdbzu lmLYhCdp2Cc=" crossorigin="anonymous"></script>
<!--
rangeslider.js example
https://github.com/andreruffert/rangeslider.js
by André Ruffert - @andreruffert
-->
<br/>
<input type="range" min="0" max="4" step="0.5">
Вот результирующий снимок, показанный после интеграции code II в мой проект
Ожидаемый результат:
Код I необходимо интегрировать / модифицировать, взяв код из фрагментов кода II
или
Помимо rangeslider.js
плагина, если в случае, если необходимо выполнить какие-либо другие процедуры.
Комментарии:
1. что вы имеете в виду под пользовательскими числами? вам нужен ползунок между значениями от x до y?
2. Да! Конечно, не ч / б два нет, т. Е. Только один скользящий маркер, показывающий выбранный диапазон @Patte