HTML5: दो इनपुट के साथ स्लाइडर संभव?

Question

क्या दो इनपुट मूल्यों के साथ HTML5 स्लाइडर बनाना संभव है, उदाहरण के लिए एक मूल्य सीमा का चयन करना? यदि हां, तो यह कैसे किया जा सकता है?

Answer 1

नहीं, HTML5 रेंज इनपुट केवल एक इनपुट स्वीकार करता है। मैं आपको उस कार्य के लिए jQuery UI रेंज स्लाइडर की तरह कुछ का उपयोग करने की सलाह दूंगा।

Comments

लिंक और जानकारी के लिए धन्यवाद। मुझे यह जांचना होगा कि क्या मुझे मोबाइल उपकरणों पर चलने के लिए मिल सकता है।

— बार-बार

कुछ समय पहले ... लेकिन मैं एक दूसरे के ऊपर दो स्लाइडर्स रखकर एक डबल स्लाइडर "नकली" करने में कामयाब रहा। एक न्यूनतम मूल्य पर शुरू होता है, दूसरा अधिकतम मूल्य पर शुरू होता है। मुझे लगता है कि यह धोखा है लेकिन ... यह मेरे लिए काम करता है।

— लगातार

WhatWG कम से कम इसे लागू करने पर चर्चा कर रहा है: html.spec.whatwg.org/multipage/…

— कुनमबी

मुझे खुद jQuery UI स्लाइडर की तुलना में ionRangeSlider थोड़ा बेहतर लगता है: ionden.com/a/plugins/ion.rangeSlider/en.html

— Charlotte

एक और तरीका है "नकली" डबल स्लाइडर को साइड-बाय-साइड इनपुट नियंत्रणों के साथ: simple.gy/blog/range-slider-two-handles

— SimpleGy

Answer 2

मैं कुछ समय के लिए एक हल्के, निर्भरता मुक्त दोहरे स्लाइडर की तलाश कर रहा हूं (यह सिर्फ इसके लिए jQuery आयात करने के लिए पागल लग रहा था) और वहाँ बहुत से प्रतीत नहीं होते हैं। मैंने @ Wildhoney का कोड थोड़ा संशोधित किया और वास्तव में इसे पसंद किया।

function getVals(){
  // Get slider values
  var parent = this.parentNode;
  var slides = parent.getElementsByTagName("input");
    var slide1 = parseFloat( slides[0].value );
    var slide2 = parseFloat( slides[1].value );
  // Neither slider will clip the other, so make sure we determine which is larger
  if( slide1 > slide2 ){ var tmp = slide2; slide2 = slide1; slide1 = tmp; }
  
  var displayElement = parent.getElementsByClassName("rangeValues")[0];
      displayElement.innerHTML = slide1 + " - " + slide2;
}

window.onload = function(){
  // Initialize Sliders
  var sliderSections = document.getElementsByClassName("range-slider");
      for( var x = 0; x < sliderSections.length; x++ ){
        var sliders = sliderSections[x].getElementsByTagName("input");
        for( var y = 0; y < sliders.length; y++ ){
          if( sliders[y].type ==="range" ){
            sliders[y].oninput = getVals;
            // Manually trigger event first time to display values
            sliders[y].oninput();
          }
        }
      }
}

  section.range-slider {
    position: relative;
    width: 200px;
    height: 35px;
    text-align: center;
}

section.range-slider input {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 15px;
    width: 200px;
    outline: none;
    height: 18px;
    margin: 0;
    padding: 0;
}

section.range-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
}

section.range-slider input::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 9px;
}

section.range-slider input::-moz-range-track {
    position: relative;
    z-index: -1;
    background-color: rgba(0, 0, 0, 1);
    border: 0;
}
section.range-slider input:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
}
  section.range-slider input[type=range]::-moz-focus-outer {
  border: 0;
}

<!-- This block can be reused as many times as needed -->
<section class="range-slider">
  <span class="rangeValues"></span>
  <input value="5" min="0" max="15" step="0.5" type="range">
  <input value="10" min="0" max="15" step="0.5" type="range">
</section>

Comments

दुर्भाग्य से यह एंड्रॉइड 4.0.4 मोबाइल सफारी 4.0 ब्राउज़र के साथ काम नहीं करता है। :-(

— एरिक

@ मेरे पास वास्तव में उन संस्करणों का परीक्षण करने का एक अच्छा तरीका नहीं है, लेकिन यह मेरे लिए एंड्रॉइड 5.0 पर सफारी के नवीनतम संस्करण के साथ काम करता है (जो Google Play कहता है कि 1.2 है, इसलिए मैं आपके 4.0 के बारे में उलझन में हूं)। यदि आप इसका पता लगाते हैं, तो मुझे जानना अच्छा लगेगा।

— गैरी

यह वास्तव में चालाक है! मुझे आश्चर्य है कि यह कैसे सही जवाब के रूप में चिह्नित नहीं है क्योंकि यह समस्या को किसी भी प्रकार की निर्भरता के बिना शान से हल करता है। सिर्फ ऐसा करने के लिए jQuery जोड़ना स्पष्ट रूप से ओवरकिल है।

— ज़ानोना

@zanona धन्यवाद, लेकिन सही उत्तर 4 साल पहले चिह्नित किया गया था, इसलिए मुझे नहीं लगता कि ओपी ने किसी अन्य समाधान के लिए बहुत परवाह की।

— गैरी

मैं वास्तव में आपके दृष्टिकोण को पसंद करता हूं और इसे अपने उपयोग के मामले में ढालने की कोशिश करता हूं, लेकिन जब मुझे एहसास हुआ कि मेरे पास कुछ डिज़ाइन विनिर्देश हैं (जैसे "सक्रिय" रंग को अलग-अलग ट्रैक के बाकी हिस्सों की तुलना में अलग करना है) ) इसके साथ लागू करना संभव नहीं है। इसलिए मैंने एक और समाधान की तलाश की और यह वास्तव में साफ-सुथरा प्रोजेक्ट पाया: ताज़गी से भरा हुआ। निस्संदेह यह निर्भरता मुक्त है, एक अच्छा और साफ एपीआई है, एएमडी संगत है, और बहुत सारे विकल्प प्रदान करता है। अब तक मैं इससे काफी खुश हूं।

— फेलिक्स वाईबर्ग

Answer 3

देर से आ रहा है, लेकिन noUiSlider एक jQuery-ui निर्भरता होने से बचता है, जो स्वीकृत उत्तर नहीं देता है। इसकी एकमात्र "चेतावनी" IE समर्थन IE9 और नए के लिए है, यदि विरासत IE आपके लिए एक सौदा ब्रेकर है।

यह मुफ़्त, खुला स्रोत है और प्रतिबंधों के बिना व्यावसायिक परियोजनाओं में इस्तेमाल किया जा सकता है।

स्थापना: डाउनलोड करें NoUiSlider, अपनी साइट फ़ाइल सिस्टम में कहीं सीएसएस और जेएस फ़ाइल निकालें, और फिर सीएसएस को सिर से और शरीर से जेएस से लिंक करें:

<!-- In <head> -->
<link href="nouislider.min.css" rel="stylesheet">

<!-- In <body> -->
<script src="nouislider.min.js"></script>

उदाहरण उपयोग: एक स्लाइडर बनाता है जो 0 से 100 तक जाता है, और 20-80 तक सेट होता है।

HTML:

<div id="slider">
</div>

जे एस:

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

Comments

वाह! अद्भुत!! यह वही है जो हमें चाहिए था और यह आश्चर्यजनक रूप से विकसित हुआ है! JQuery के बारे में

— डेविडटुबमैन

हालांकि, खुद को जोड़ना और परियोजना के लिए एक पुल अनुरोध भेजना काफी आसान होना चाहिए, हालांकि?

— dario_ramos

मैंने इसमें खुदाई नहीं की, लेकिन मैं कीबोर्ड के साथ स्लाइडर का उपयोग कर सकता था, इसलिए मुझे लगता है कि यह अब लागू हो गया है @ptrin :)

— Edu Ruiz

Answer 4

यकीन है कि आप बस दो स्लाइडर्स का उपयोग एक दूसरे को ओवरलेइंग कर सकते हैं और जावास्क्रिप्ट का एक सा जोड़ सकते हैं (वास्तव में 5 लाइनों से अधिक नहीं) कि चयनकर्ता न्यूनतम / अधिकतम मान (@Garys की तरह) से अधिक नहीं हैं।

संलग्न आप एक वर्तमान परियोजना से अनुकूलित एक छोटा सा स्निपेट पाएंगे जिसमें सीएसएस 3 स्टाइलिंग शामिल है जो यह दिखा सकता है कि आप क्या कर सकते हैं (केवल वेबकिट)। मैंने चयनित मानों को प्रदर्शित करने के लिए कुछ लेबल भी जोड़े।

यह JQuery का उपयोग करता है लेकिन एक वानीलाज संस्करण कोई जादू नहीं है।

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

Comments

अरे बहुत अच्छा लग रहा है! लेकिन यह फ़ायरफ़ॉक्स में काम नहीं करता है, आप केवल अधिकतम इनपुट को खींच सकते हैं। क्या आपने इसे ठीक करने का प्रबंधन किया था?

— टोनी मिशेल कैबेट

ओह यार। मैं यहाँ लगभग एक ही बात जोड़ने के लिए आया था! simple.gy/blog/range-slider-two-handles मेरा संस्करण इनपुट्स को साथ-साथ रखता है, लेकिन दोहरे इनपुट का भी उपयोग करता है।

— सिंपलजी

Answer 5

वास्तव में मैंने html में अपनी स्क्रिप्ट का सीधे इस्तेमाल किया। लेकिन जावास्क्रिप्ट में जब आप इस घटना के लिए oninput इवेंट श्रोता को जोड़ते हैं तो यह डेटा को स्वचालित रूप से देता है। आपको बस अपनी आवश्यकता के अनुसार मान असाइन करने की आवश्यकता होती है।

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