Gibt es ein Plugin oder ein Beispiel für einen jQuery-Slider, der mit nicht gleichwertbaren Werten arbeitet?

Question

ich zwei ausgezeichnete jQuery-Plugins zum Erzeugen eines Schiebers für einen Web-Formular gefunden haben, die schön in Browsern degradieren, die JavaScript-Stile unterstützen nicht ausgeschaltet usw.

Die erste ist die Jquery.UI Version: http://ui.jquery.com/demos/slider/#steps

Das zweite ist ein Auswahlelement Schieber: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

Allerdings brauche ich einen Schieberegler zu schaffen, der nicht nur den Schieber in gleichen Teilen aufzuteilen.

Für das Beispiel nehmen wir sagen, dass ich die folgende Reihe von Zahlen haben:

800,1000,1100,1200,1300,1400,1500

ich den Schieber eine schöne große Lücke zwischen haben möchten 800 und 1000 dann kleinere Lücken zwischen 1100-1500

So würde der Schieber ein wenig wie folgt aussehen:

800 ---- 1000--1100--1200--1300--1400--1500

Vorzugsweise möchte ich, dass es zu einem Drop-down degradiert, also ist die Frage, ob jemand ein Plugin kennt, das dies unterstützt oder irgendwelche Empfehlungen für den besten Weg hat, dies zu tun, die Filamentgruppen-Plugin-Rolle selbst anzupassen usw.

Update: Hacken über mit Slider der Filamentgruppe und implementiert die Griffe über JQuery UI Slider sowieso. Es sieht also so aus, als wäre JQuery.UI selbst zu modifizieren. Ich werde im Code nachsehen, ob ich das erforderliche Bit finden kann, das geändert werden muss. Wenn in der Zwischenzeit jemand Ideen hat !!!

Answer 1

Sie könnten es tun jQuerys Schieber verändert werden, indem sie in den Schlitten Ereignis Einhaken (überschreibt es effektiv) ... Etwas wie folgt aus:

$(function() { 
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100]; 
    var slider = $("#slider").slider({ 
     slide: function(event, ui) { 
      var includeLeft = event.keyCode != $.ui.keyCode.RIGHT; 
      var includeRight = event.keyCode != $.ui.keyCode.LEFT; 
      slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value)); 
      return false; 
     } 
    }); 
    function findNearest(includeLeft, includeRight, value) { 
     var nearest = null; 
     var diff = null; 
     for (var i = 0; i < values.length; i++) { 
      if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) { 
       var newDiff = Math.abs(value - values[i]); 
       if (diff == null || newDiff < diff) { 
        nearest = values[i]; 
        diff = newDiff; 
       } 
      } 
     } 
     return nearest; 
    } 
}); 

Sollte arbeiten für das, was Sie beschreiben ... ich habe es ausprobiert zum Ziehen mit der Maus & mit Links/Rechts/Home/Ende-Tasten (offensichtlich müssten Sie die links/rechts nach oben/unten ändern, wenn Sie einen vertikalen Schieberegler möchten).

Einige Anmerkungen:

• Offensichtlich ist die Werte Array alle erforderlichen Schritte für Ihre Zwecke wollen.
• Auch offensichtlich, der obige Code geht davon aus, ein Div mit einer ID von "Slider" zu arbeiten.
• Es wird wahrscheinlich seltsam funktionieren, wenn Ihre Min/Max-Werte nicht mit Ihren Min/Max-Werten für den Schieberegler identisch sind (ich würde nur "min: values ​​[0], max: values ​​[values.length-1 ] "als Ihre Min/Max-Optionen auf dem Schieberegler & dann sollten Sie immer sicher sein).
• Offensichtlich wird diese Option derzeit nicht zu einer Dropdown-Liste degradieren, aber es wäre sehr einfach zu tun ... einfach Ihre Auswahl als eine normale Dropdown-Liste (der Standardstatus incase von kein Javascript) & dann verwenden jquery, um die Dropdown-Liste auszublenden und basierend auf den Optionen auch Ihr Werte-Array zu erstellen. Dann könnten Sie einfach die (verborgene) Drop-Down-Liste aktualisieren, während Sie gleichzeitig den Schieberegler im obigen Code aktualisieren, so dass der richtige Wert in der Dropdown-Liste ausgewählt wird, wenn Ihr Formular posten wird.

Hoffe, dass hilft.

Answer 2

In es6 Sie Ihre nächstgelegene Zahl von folgenden ..

function findClosest(array, value) { 
 
    return array.sort((a, b) => Math.abs(value - a) - Math.abs(value - b))[0]; 
 
} 
 

 
let array = [1, 5, 10, 28, 21]; 
 
let v = 4; 
 
let number = findClosest(array, v); // -> 5

finden