দুটি ইনপুট মান সহ কোনও এইচটিএমএল 5 স্লাইডার তৈরি করা সম্ভব, উদাহরণস্বরূপ দামের সীমাটি নির্বাচন করা? যদি তা হয় তবে কীভাবে এটি করা যায়?
উত্তর:
না, এইচটিএমএল 5 রেঞ্জের ইনপুট কেবল একটি ইনপুট গ্রহণ করে। আমি আপনাকে সেই কাজের জন্য jQuery UI রেঞ্জ স্লাইডারের মতো কিছু ব্যবহার করার পরামর্শ দিচ্ছি ।
আমি কিছু সময়ের জন্য একটি হালকা ওজন, নির্ভরতা মুক্ত দ্বৈত স্লাইডার সন্ধান করছি (কেবল এটির জন্য jQuery আমদানি করা পাগল বলে মনে হয়েছিল) এবং সেখানে খুব বেশি উপস্থিত হবে বলে মনে হয় না। আমি @ ওয়াইল্ডহনির কোডটি কিছুটা সংশোধন করে শেষ করেছি এবং সত্যিই এটি পছন্দ করে।
দেরীতে আসছে, কিন্তু noUiSlider jQuery-ui নির্ভরতা এড়িয়ে চলে, যা গৃহীত উত্তরটি দেয় না। আইসি 9 এবং নতুনটির পক্ষে এটির একমাত্র "ক্যাভিয়েট" সমর্থন, যদি লিগ্যাসি আইই আপনার জন্য একটি চুক্তি ভঙ্গকারী হয়।
এটি নিখরচায়, মুক্ত উত্স এবং কোনও বিধিনিষেধ ছাড়াই বাণিজ্যিক প্রকল্পগুলিতে ব্যবহার করা যেতে পারে।
ইনস্টলেশন: noUiSlider ডাউনলোড করুন, আপনার সাইট ফাইল সিস্টেমে কোথাও সিএসএস এবং জেএস ফাইল বের করুন এবং তারপরে সিএসএসের সাথে মাথা থেকে এবং জেএস থেকে শরীরের লিঙ্ক করুন:
<!-- In <head> -->
<link href="nouislider.min.css" rel="stylesheet">
<!-- In <body> -->
<script src="nouislider.min.js"></script>
ব্যবহারের উদাহরণ: একটি স্লাইডার তৈরি করে যা 0 থেকে 100 পর্যন্ত চলে এবং 20-80 এ সেট শুরু হয়।
এইচটিএমএল:
<div id="slider">
</div>
জেএস:
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
নিশ্চিত যে আপনি কেবল একে অপরকে ওভারলাই করে দুটি স্লাইডার ব্যবহার করতে পারেন এবং জাভাস্ক্রিপ্টের একটি বিট যোগ করতে পারেন (আসলে 5 টির বেশি নয়) নির্বাচকরা ন্যূনতম / সর্বোচ্চ মানগুলি (@ গ্যারিগুলির মতো) সমাধানের চেয়ে বেশি নয়।
আপনি যা করতে পারেন তা প্রদর্শনের জন্য কিছু CSS3 স্টাইলিং সহ একটি বর্তমান প্রকল্পের সাথে সংযুক্ত একটি সংক্ষিপ্ত স্নিপেট পাবেন Att আমি নির্বাচিত মানগুলি প্রদর্শন করতে কিছু লেবেলও যুক্ত করেছি।
এটি জিকিউরি ব্যবহার করে তবে একটি ভ্যানিলাজ সংস্করণ যাদু নয়।
(function() {
function addSeparator(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + '.' + '$2');
}
return x1 + x2;
}
function rangeInputChangeEventHandler(e){
var rangeGroup = $(this).attr('name'),
minBtn = $(this).parent().children('.min'),
maxBtn = $(this).parent().children('.max'),
range_min = $(this).parent().children('.range_min'),
range_max = $(this).parent().children('.range_max'),
minVal = parseInt($(minBtn).val()),
maxVal = parseInt($(maxBtn).val()),
origin = $(this).context.className;
if(origin === 'min' && minVal > maxVal-5){
$(minBtn).val(maxVal-5);
}
var minVal = parseInt($(minBtn).val());
$(range_min).html(addSeparator(minVal*1000) + ' €');
if(origin === 'max' && maxVal-5 < minVal){
$(maxBtn).val(5+ minVal);
}
var maxVal = parseInt($(maxBtn).val());
$(range_max).html(addSeparator(maxVal*1000) + ' €');
}
$('input[type="range"]').on( 'input', rangeInputChangeEventHandler);
})();body{
font-family: sans-serif;
font-size:14px;
}
input[type='range'] {
width: 210px;
height: 30px;
overflow: hidden;
cursor: pointer;
outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 1px;
background: #003D7C;
}
input[type='range']:nth-child(2)::-webkit-slider-runnable-track{
background: none;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
height: 15px;
width: 15px;
margin-top: -7px;
background: #fff;
border: 1px solid #003D7C;
border-radius: 25px;
z-index: 1;
}
input[type='range']:nth-child(1)::-webkit-slider-thumb{
z-index: 2;
}
.rangeslider{
position: relative;
height: 60px;
width: 210px;
display: inline-block;
margin-top: -5px;
margin-left: 20px;
}
.rangeslider input{
position: absolute;
}
.rangeslider{
position: absolute;
}
.rangeslider span{
position: absolute;
margin-top: 30px;
left: 0;
}
.rangeslider .right{
position: relative;
float: right;
margin-right: -5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="rangeslider">
<input class="min" name="range_1" type="range" min="1" max="100" value="10" />
<input class="max" name="range_1" type="range" min="1" max="100" value="90" />
<span class="range_min light left">10.000 €</span>
<span class="range_max light right">90.000 €</span>
</div>আসলে আমি আমার স্ক্রিপ্টটি সরাসরি এইচটিএমএলে ব্যবহার করেছি। তবে জাভাস্ক্রিপ্টে আপনি যখন এই ইভেন্টের জন্য ইনপুট ইভেন্ট শ্রোতাদের যুক্ত করেন এটি স্বয়ংক্রিয়ভাবে ডেটা দেয় You আপনার প্রয়োজন অনুযায়ী মান নির্ধারণ করা দরকার।
[slider] {
width: 300px;
position: relative;
height: 5px;
margin: 45px 0 10px 0;
}
[slider] > div {
position: absolute;
left: 13px;
right: 15px;
height: 5px;
}
[slider] > div > [inverse-left] {
position: absolute;
left: 0;
height: 5px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [inverse-right] {
position: absolute;
right: 0;
height: 5px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [range] {
position: absolute;
left: 0;
height: 5px;
border-radius: 14px;
background-color: #d02128;
}
[slider] > div > [thumb] {
position: absolute;
top: -7px;
z-index: 2;
height: 20px;
width: 20px;
text-align: left;
margin-left: -11px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background-color: #FFF;
border-radius: 50%;
outline: none;
}
[slider] > input[type=range] {
position: absolute;
pointer-events: none;
-webkit-appearance: none;
z-index: 3;
height: 14px;
top: -2px;
width: 100%;
opacity: 0;
}
div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
border: transparent;
}
div[slider] > input[type=range]:focus {
outline: none;
}
div[slider] > input[type=range]::-webkit-slider-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
-webkit-appearance: none;
}
div[slider] > input[type=range]::-ms-fill-lower {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-fill-upper {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-tooltip {
display: none;
}
[slider] > div > [sign] {
opacity: 0;
position: absolute;
margin-left: -11px;
top: -39px;
z-index:3;
background-color: #d02128;
color: #fff;
width: 28px;
height: 28px;
border-radius: 28px;
-webkit-border-radius: 28px;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
[slider] > div > [sign]:after {
position: absolute;
content: '';
left: 0;
border-radius: 16px;
top: 19px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top-width: 16px;
border-top-style: solid;
border-top-color: #d02128;
}
[slider] > div > [sign] > span {
font-size: 12px;
font-weight: 700;
line-height: 28px;
}
[slider]:hover > div > [sign] {
opacity: 1;
}<div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:0%;right:0%;"></div>
<span thumb style="left:0%;"></span>
<span thumb style="left:100%;"></span>
<div sign style="left:0%;">
<span id="value">0</span>
</div>
<div sign style="left:100%;">
<span id="value">100</span>
</div>
</div>
<input type="range" value="0" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[1].style.width=value+'%';
children[5].style.left=value+'%';
children[7].style.left=value+'%';children[11].style.left=value+'%';
children[11].childNodes[1].innerHTML=this.value;" />
<input type="range" value="100" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[3].style.width=(100-value)+'%';
children[5].style.right=(100-value)+'%';
children[9].style.left=value+'%';children[13].style.left=value+'%';
children[13].childNodes[1].innerHTML=this.value;" />
</div>প্রশ্নটি ছিল: "দুটি ইনপুট মান সহ একটি এইচটিএমএল 5 স্লাইডার তৈরি করা সম্ভব, উদাহরণস্বরূপ দামের সীমাটি নির্বাচন করা? যদি তা হয় তবে কীভাবে এটি করা যায়?"
দশ বছর আগে উত্তর সম্ভবত 'না' ছিল। তবে সময় বদলেছে। ইন 2020 অবশেষে একটি নির্মাণ করা সম্ভব দুই অঙ্গুষ্ঠ সঙ্গে সম্পূর্ণরূপে অ্যাক্সেসযোগ্য নেটিভ, অ jQuery HTML5 এর স্লাইডার মূল্য ব্যাপ্তির জন্য। আমি ইতিমধ্যে এই সমাধানটি তৈরি করার পরে যদি এটি পোস্ট করা হয় এবং আমি ভেবেছিলাম যে আমার বাস্তবায়নটি এখানে ভাগ করে নেওয়া ভাল লাগবে।
এই বাস্তবায়নটি মোবাইল ক্রোম এবং ফায়ারফক্স (অ্যান্ড্রয়েড) এবং ক্রোম এবং ফায়ারফক্স (লিনাক্স) পরীক্ষিত হয়েছে। আমি অন্যান্য প্ল্যাটফর্মগুলি সম্পর্কে নিশ্চিত নই, তবে এটি বেশ ভাল হওয়া উচিত। আমি আপনার প্রতিক্রিয়া পেতে এবং এই সমাধানটি উন্নত করতে চাই।
এই সমাধানটি এক পৃষ্ঠায় একাধিক উদাহরণ দেয় এবং এতে স্ক্রিন পাঠকদের জন্য বর্ণনামূলক লেবেল যুক্ত মাত্র দুটি ইনপুট (প্রতিটি) থাকে। আপনি গ্রিড লেবেলের পরিমাণে থাম্বের আকার নির্ধারণ করতে পারেন। এছাড়াও, আপনি স্লাইডারের সাথে ইন্টারঅ্যাক্ট করতে স্পর্শ, কীবোর্ড এবং মাউস ব্যবহার করতে পারেন। 'ইনপুট' ইভেন্ট শ্রোতার কারণে মানটি সামঞ্জস্যের সময় আপডেট হয়।
আমার প্রথম পন্থাটি ছিল স্লাইডারগুলিকে ওভারলে করে সেগুলি ক্লিপ করা। যাইহোক, এর ফলে প্রচুর ব্রাউজার নির্ভরতা সহ জটিল কোড আসে। তারপরে আমি দুটি স্লাইডার দিয়ে সমাধানটি পুনরায় তৈরি করেছি যা ছিল 'ইনলাইন'। এটি নীচে আপনি সমাধান পাবেন solution
var thumbsize = 14;
function draw(slider,splitvalue) {
/* set function vars */
var min = slider.querySelector('.min');
var max = slider.querySelector('.max');
var lower = slider.querySelector('.lower');
var upper = slider.querySelector('.upper');
var legend = slider.querySelector('.legend');
var thumbsize = parseInt(slider.getAttribute('data-thumbsize'));
var rangewidth = parseInt(slider.getAttribute('data-rangewidth'));
var rangemin = parseInt(slider.getAttribute('data-rangemin'));
var rangemax = parseInt(slider.getAttribute('data-rangemax'));
/* set min and max attributes */
min.setAttribute('max',splitvalue);
max.setAttribute('min',splitvalue);
/* set css */
min.style.width = parseInt(thumbsize + ((splitvalue - rangemin)/(rangemax - rangemin))*(rangewidth - (2*thumbsize)))+'px';
max.style.width = parseInt(thumbsize + ((rangemax - splitvalue)/(rangemax - rangemin))*(rangewidth - (2*thumbsize)))+'px';
min.style.left = '0px';
max.style.left = parseInt(min.style.width)+'px';
min.style.top = lower.offsetHeight+'px';
max.style.top = lower.offsetHeight+'px';
legend.style.marginTop = min.offsetHeight+'px';
slider.style.height = (lower.offsetHeight + min.offsetHeight + legend.offsetHeight)+'px';
/* correct for 1 off at the end */
if(max.value>(rangemax - 1)) max.setAttribute('data-value',rangemax);
/* write value and labels */
max.value = max.getAttribute('data-value');
min.value = min.getAttribute('data-value');
lower.innerHTML = min.getAttribute('data-value');
upper.innerHTML = max.getAttribute('data-value');
}
function init(slider) {
/* set function vars */
var min = slider.querySelector('.min');
var max = slider.querySelector('.max');
var rangemin = parseInt(min.getAttribute('min'));
var rangemax = parseInt(max.getAttribute('max'));
var avgvalue = (rangemin + rangemax)/2;
var legendnum = slider.getAttribute('data-legendnum');
/* set data-values */
min.setAttribute('data-value',rangemin);
max.setAttribute('data-value',rangemax);
/* set data vars */
slider.setAttribute('data-rangemin',rangemin);
slider.setAttribute('data-rangemax',rangemax);
slider.setAttribute('data-thumbsize',thumbsize);
slider.setAttribute('data-rangewidth',slider.offsetWidth);
/* write labels */
var lower = document.createElement('span');
var upper = document.createElement('span');
lower.classList.add('lower','value');
upper.classList.add('upper','value');
lower.appendChild(document.createTextNode(rangemin));
upper.appendChild(document.createTextNode(rangemax));
slider.insertBefore(lower,min.previousElementSibling);
slider.insertBefore(upper,min.previousElementSibling);
/* write legend */
var legend = document.createElement('div');
legend.classList.add('legend');
var legendvalues = [];
for (var i = 0; i < legendnum; i++) {
legendvalues[i] = document.createElement('div');
var val = Math.round(rangemin+(i/(legendnum-1))*(rangemax - rangemin));
legendvalues[i].appendChild(document.createTextNode(val));
legend.appendChild(legendvalues[i]);
}
slider.appendChild(legend);
/* draw */
draw(slider,avgvalue);
/* events */
min.addEventListener("input", function() {update(min);});
max.addEventListener("input", function() {update(max);});
}
function update(el){
/* set function vars */
var slider = el.parentElement;
var min = slider.querySelector('#min');
var max = slider.querySelector('#max');
var minvalue = Math.floor(min.value);
var maxvalue = Math.floor(max.value);
/* set inactive values before draw */
min.setAttribute('data-value',minvalue);
max.setAttribute('data-value',maxvalue);
var avgvalue = (minvalue + maxvalue)/2;
/* draw */
draw(slider,avgvalue);
}
var sliders = document.querySelectorAll('.min-max-slider');
sliders.forEach( function(slider) {
init(slider);
});* {padding: 0; margin: 0;}
body {padding: 40px;}
.min-max-slider {position: relative; width: 200px; text-align: center; margin-bottom: 50px;}
.min-max-slider > label {display: none;}
span.value {height: 1.7em; font-weight: bold; display: inline-block;}
span.value.lower::before {content: "€"; display: inline-block;}
span.value.upper::before {content: "- €"; display: inline-block; margin-left: 0.4em;}
.min-max-slider > .legend {display: flex; justify-content: space-between;}
.min-max-slider > .legend > * {font-size: small; opacity: 0.25;}
.min-max-slider > input {cursor: pointer; position: absolute;}
/* webkit specific styling */
.min-max-slider > input {
-webkit-appearance: none;
outline: none!important;
background: transparent;
background-image: linear-gradient(to bottom, transparent 0%, transparent 30%, silver 30%, silver 60%, transparent 60%, transparent 100%);
}
.min-max-slider > input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 14px; /* Set a specific slider handle width */
height: 14px; /* Slider handle height */
background: #eee; /* Green background */
cursor: pointer; /* Cursor on hover */
border: 1px solid gray;
border-radius: 100%;
}
.min-max-slider > input::-webkit-slider-runnable-track {cursor: pointer;}<div class="min-max-slider" data-legendnum="2">
<label for="min">Minimum price</label>
<input id="min" class="min" name="min" type="range" step="1" min="0" max="3000" />
<label for="max">Maximum price</label>
<input id="max" class="max" name="max" type="range" step="1" min="0" max="3000" />
</div>নোট করুন যে redraws / redraw বাগের কারণে মানগুলি পরিবর্তন করতে রোধ করতে আপনার পদক্ষেপের আকার 1 এ রাখা উচিত।
অনলাইনে এখানে দেখুন: https://codepen.io/joosts/pen/rNLdxvK
avgvalueXX.5 হতে পারে)। ফলস্বরূপ আপনি বাম স্লাইডার সহ ন্যূনতম আকার 1 এর পরিধি তৈরি করতে পারেন তবে ডান স্লাইডার সহ 0 টি করতে পারেন। আমি সঙ্গে এটি মীমাংসিত করেছি floor/ ceilসংশ্লিষ্ট ইনপুট এর জন্য max/ min+ + শর্তাধীন padding-leftদ্বিতীয় স্লাইডার এইভাবে উভয় পক্ষের কমপক্ষে আকার 1 পরিসীমা অনুমোদন করার জন্য।