HTML-Slider mit zwei Eingängen möglich?

Question 1

Ist es möglich, einen HTML5-Schieberegler mit zwei Eingabewerten zu erstellen, um beispielsweise eine Preisspanne auszuwählen? Wenn ja, wie kann es gemacht werden?

Question 2

Ich habe einige Zeit nach einem leichten, abhängigkeitsfreien Dual-Slider gesucht (es schien verrückt, jQuery nur dafür zu importieren) und es scheint nicht viele zu geben. Am Ende habe ich modifiziert @Wildhoneys Code ein bisschen und mag es wirklich.

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>

Question 3

Nein, die HTML5-Bereichseingabe akzeptiert nur eine Eingabe. Ich würde Ihnen empfehlen, so etwas zu verwenden jQuery-UI-Bereichsschieberegler für diese Aufgabe.

Question 4

Kommt spät, aber noUiSlider vermeidet eine jQuery-ui-Abhängigkeit, was bei der akzeptierten Antwort nicht der Fall ist. Der einzige “Vorbehalt” ist, dass die IE-Unterstützung für IE9 und neuer gilt, wenn der ältere IE für Sie ein Deal Breaker ist.

Es ist außerdem kostenlos, Open Source und kann ohne Einschränkungen in kommerziellen Projekten verwendet werden.

Installation: Laden Sie noUiSlider herunter, extrahieren Sie die CSS- und JS-Datei irgendwo in Ihrem Site-Dateisystem und verlinken Sie dann auf das CSS von head und auf JS von body:

<!-- In <head> -->
<link href="https://stackoverflow.com/questions/4753946/nouislider.min.css" rel="stylesheet">

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

Verwendungsbeispiel: Erstellt einen Schieberegler, der von 0 bis 100 geht und bei 20-80 beginnt.

HTML:

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

JS:

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

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

Question 5

Sicher, Sie können einfach zwei Schieberegler verwenden, die sich überlagern, und ein bisschen Javascript hinzufügen (eigentlich nicht mehr als 5 Zeilen), damit die Selektoren die Min/Max-Werte nicht überschreiten (wie in @Garys) Lösung.

Im Anhang finden Sie ein kurzes Snippet, das aus einem aktuellen Projekt angepasst wurde, einschließlich einiger CSS3-Stile, um zu zeigen, was Sie tun können (nur Webkit). Ich habe auch einige Beschriftungen hinzugefügt, um die ausgewählten Werte anzuzeigen.

Es verwendet JQuery, aber eine Vanillajs-Version ist keine Zauberei.

@Aktualisieren: Der folgende Code war nur ein Proof of Concept. Aufgrund vieler Nachfragen habe ich eine mögliche Lösung für Mozilla Firefox hinzugefügt (ohne den ursprünglichen Code zu ändern). Möglicherweise möchten Sie den folgenden Code brechen, bevor Sie ihn verwenden.

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


/* Proof of concept for Firefox */
@-moz-document url-prefix() {
  .rangeslider::before{
    content:'';
    width:100%;
    height:2px;
    background: #003D7C;
    display:block;
    position: relative;
    top:16px;
  }

  input[type="range"]:nth-child(1){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }

  input[type="range"]:nth-child(2){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }
input[type="range"]::-moz-range-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)::-moz-range-thumb {
      transform: translateY(-20px);    
  }
  input[type="range"]:nth-child(2)::-moz-range-thumb {
      transform: translateY(-20px);    
  }
}

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

Question 6

Eigentlich habe ich mein Skript direkt in HTML verwendet. Aber in Javascript, wenn Sie den Input-Event-Listener für dieses Event hinzufügen, gibt es die Daten automatisch aus. Sie müssen nur den Wert gemäß Ihrer Anforderung zuweisen.

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

Question 7

Die Frage war: “Ist es möglich, einen HTML5-Slider mit zwei Eingabewerten zu erstellen, um beispielsweise eine Preisspanne auszuwählen? Wenn ja, wie kann das gemacht werden?”

Im Jahr 2020 ist es möglich, eine zu erstellen vollständig zugänglicher, nativer HTML5-Schieberegler ohne JQuery mit zwei Daumen für Preisklassen. Wenn dies gepostet wurde, nachdem ich diese Lösung bereits erstellt hatte, dachte ich, dass es schön wäre, meine Implementierung hier zu teilen.

Diese Implementierung wurde auf Mobilgeräten mit Chrome und Firefox (Android) sowie Chrome und Firefox (Linux) getestet. Bei anderen Plattformen bin ich mir nicht sicher, aber es sollte ziemlich gut sein. Ich würde gerne Ihr Feedback erhalten und diese Lösung verbessern.

Diese Lösung ermöglicht mehrere Instanzen auf einer Seite und besteht aus nur zwei Eingaben (jeweils) mit beschreibenden Labels für Screenreader. Sie können die Daumengröße in der Anzahl der Rasterbeschriftungen festlegen. Sie können auch Touch, Tastatur und Maus verwenden, um mit dem Schieberegler zu interagieren. Der Wert wird aufgrund des Ereignis-Listeners „on input“ während der Anpassung aktualisiert.

Mein erster Ansatz bestand darin, die Schieberegler zu überlagern und zu beschneiden. Das führte jedoch zu komplexem Code mit vielen Browserabhängigkeiten. Dann habe ich die Lösung mit zwei Schiebereglern neu erstellt, die “inline” waren. Dies ist die Lösung, die Sie unten finden.

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>

Beachten Sie, dass Sie die Schrittgröße auf 1 belassen sollten, um zu verhindern, dass sich die Werte aufgrund von Neuzeichnungen/Neuzeichnungsfehlern ändern.

Online anschauen unter: https://codepen.io/joosts/pen/rNLdxvK

Question 8

2022 – Zugängliche Lösung – Lösung in 30 Sekunden zu implementieren

Diese Lösung baut auf dieser Antwort von @JoostS auf. Barrierefreiheit ist etwas, auf das sich keine der Antworten konzentriert hat, und das ist ein Problem. Daher habe ich auf der obigen Antwort aufgebaut, indem ich sie zugänglicher und erweiterbarer gemacht habe, da sie einige Mängel aufwies.

Die Verwendung ist sehr einfach:

Verwenden Sie die CDN oder hosten Sie das Skript lokal: https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components/dist/simpleRange.min.js
Fügen Sie dieses Element zu Ihrer Vorlage oder Ihrem HTML hinzu: <range-selector min-range="0" max-range="1000" />
Haken Sie sich ein, indem Sie auf die hören range-changed Veranstaltung (oder was auch immer event-name-to-emit-on-change du gehst vorbei)

Das ist es. Sehen Sie sich hier die vollständige Demo an. Sie können es leicht anpassen, indem Sie einfach Attribute wie anwenden inputs-for-labels um Eingaben anstelle von Labels zu verwenden, slider-color um die Farbe anzupassen und vieles mehr!

Hier ist eine Geige:

window.addEventListener('range-changed', (e) => {console.log(`Range changed for: ${e.detail.sliderId}. Min/Max range values are available in this object too`)})

<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components@latest/dist/simpleRange.min.js"></script>

<div>
  <range-selector
    id="rangeSelector1"
    min-label="Minimum"
    max-label="Maximum"
    min-range="1000"
    max-range="2022"
    number-of-legend-items-to-show="6"
  />
</div>

<div>
  <range-selector
    id="rangeSelector1"
    min-label="Minimum"
    max-label="Maximum"
    min-range="1"
    max-range="500"
    number-of-legend-items-to-show="3"
    inputs-for-labels
  />
</div>

<div>
  <range-selector
    id="rangeSelector2"
    min-label="Minimum"
    max-label="Maximum"
    min-range="1000"
    max-range="2022"
    number-of-legend-items-to-show="3"
    slider-color="#6b5b95"
  />
</div>

<div>
  <range-selector
    id="rangeSelector3"
    min-label="Minimum"
    max-label="Maximum"
    min-range="1000"
    max-range="2022"
    hide-label
    hide-legend
  />
</div>

Ich habe mich entschieden, die Probleme der verknüpften Antwort wie die Verwendung von Etiketten anzusprechen display: none (schlecht für a11y), kein visueller Fokus auf dem Schieberegler usw., und den Code verbessern, indem Ereignis-Listener bereinigt und viel dynamischer und erweiterbarer gemacht werden.

Ich habe das erstellt winzig Bibliothek mit vielen Optionen, um Farben und Ereignisnamen anzupassen, sich einfach darin einzuklinken, die barrierefreien Beschriftungen i18n-fähig zu machen und vieles mehr. Hier ist es in einer Geige wenn du herumspielen willst.

Sie können die Anzahl der angezeigten Legendenelemente ganz einfach anpassen, die Beschriftungen und die Legende ausblenden oder anzeigen und die Farben von allem anpassen, einschließlich der Fokusfarbe wie dieser.

Beispiel mit mehreren Requisiten:

<range-selector
  min-label="i18n Minimum Range"
  max-label="i18n Maximum Range"
  min-range="5"
  max-range="555"
  number-of-legend-items-to-show="6"
  event-name-to-emit-on-change="my-custom-range-changed-event"
  slider-color="orange"
  circle-color="#f7cac9"
  circle-border-color="#083535"
  circle-focus-border-color="#3ec400"
/>

Dann in deinem Skript:

window.addEventListener('my-custom-range-changed-event', (e) => { const data = e.detail; });

Wenn Sie schließlich sehen, dass hier etwas fehlt, das Sie benötigen, habe ich es sehr einfach gemacht, diese Bibliothek anzupassen.

Einfach kopieren Diese Datei und oben sieht man cssHelpers und constants Objekte, die die meisten Variablen enthalten, die Sie wahrscheinlich weiter anpassen möchten.

Da ich das mit einem gebaut habe Native Web-Komponente habe ich ausgenutzt disconnectedCallback und andere Hooks, um Ereignis-Listener zu bereinigen und Dinge einzurichten.