wake-up-neo.com

jQuery UI Slider Labels Under Slider

Ich kann nur jQuery 1.4.2 und jQuery UI 1.8.5 verwenden (dies ist nicht freiwillig. Bitte fordern Sie mich nicht auf, auf die neuesten Versionen zu aktualisieren). Ich habe einen Schieberegler erstellt, der den aktuellen Wert über dem Schieberegler anzeigt. Jetzt muss jedoch eine Legende unter dem Schieberegler eingefügt werden, deren Abstand mit dem des Schiebereglers identisch ist (dh, wenn der Schieberegler 100 Pixel breit ist und fünf Werte enthält) Der Schieberegler rastet alle 20 Pixel ein. In diesem Beispiel möchte ich, dass die Werte in der Legende in 20-Pixel-Intervallen platziert werden.

Hier ist ein Beispiel für das, was ich will:

Slider

Hier ist die jQuery, die ich habe (übernommen von der UI-Slider-Demoseite):

//select element with 5 - 20 options
var el = $('.select');

//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
    min: 1,
    max: el.options.length,
    range: 'min',
    value: el.selectedIndex + 1,
    slide: function( event, ui ) {
      el.selectedIndex = ui.value - 1;
      slider.find("a").text(el.options[el.selectedIndex].label);
    },
    stop: function() {
      $(el).change();
    }
});

slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
37

Um eine Legende zu erstellen, müssen wir die Breite des Schiebereglers und die Anzahl der Elemente kennen, die dann gegeneinander geteilt werden:

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.Push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

Das p-Tag muss den Stil 'display: inline-block' haben, um korrekt zu rendern, sonst nimmt jedes Etikett eine Zeile ein oder die Etiketten werden direkt nebeneinander gestapelt.

Ich habe einen Beitrag erstellt, der das Problem und die Lösung erklärt: jQuery UI Slider Legend Under Slider der eine Live-Demo dieser Funktion enthält.

21

Die veröffentlichten Lösungen sind voll funktionsfähig, aber hier ist eine andere Lösung, die keine zusätzlichen Plugins benötigt und dies erzeugt (siehe Geige ):

a slider with simple labels

So geht's:

  1. Aktivieren Sie den Schieberegler.

  2. Fügen Sie für jeden der möglichen Werte ein label -Element mit position: absolute An (der Schieberegler ist bereits position: relative, Sodass die Beschriftungen relativ zum Schieberegler positioniert werden).

  3. Setzen Sie für jedes label die Eigenschaft left auf einen Prozentsatz.

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

JS

// A slider with a step of 1
$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
})
.each(function() {

    // Add labels to slider whose values 
    // are specified by min, max

    // Get the options for this slider (specified above)
    var opt = $(this).data().uiSlider.options;

    // Get the number of possible values
    var vals = opt.max - opt.min;

    // Position the labels
    for (var i = 0; i <= vals; i++) {

        // Create a new element and position it with percentages
        var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i/vals*100) + '%');

        // Add the element inside #slider
        $("#slider").append(el);

    }

});
64
chrisfargen

Ich habe das Gleiche gesucht und habe am Ende den jQuery UI Slider von filamentgroup verwendet (Es funktioniert wie ein Zauber und sieht stabil aus) Ich denke, dass es mit der Zeit geplant ist, in jQuery UI zusammengeführt zu werden Komponenten ...

hier ein verweis auf den artikel und beispiel + minimierte jsfiddle die ich gemacht habe

jQuery UI Slider aus einem Select-Element - jetzt mit ARIA-Unterstützung

Dies ist ein Beispiel aus dem Filament Group Lab-Artikel

Working minimized jsfiddle example - Aktualisiert und Working

wenn Sie einen einfacheren Schieberegler (ohne Bereich) verwenden möchten, müssen Sie nur das zweite select -Element entfernen


Ein weiteres Nizza-Plugin, das den Job macht: jslider

12
Daniel

Eine weitere Lösung mit benutzerdefinierten Etiketten und ohne feste Etikettengröße.

JS Bin

7

Ich habe eine einfache Lösung für einen Schieberegler mit Beschriftungen, die nur jquery verwenden.

enter image description here

Sie richten Ihr Div einfach dort ein, wo der Schieberegler hin soll

<div class="sliderWithLabels" id="mySlider1"></div>

Rufen Sie dann die Setup-Methode auf, mit der die Beschriftungen an den entsprechenden Indexen zum Schieberegler hinzugefügt werden.

// setupSlider(divId, labelArray, initialIndex);
setupSlider('mySlider3', ["label1", "label2", "label3", "label3"], 3);

den vollständigen Code finden Sie im Code-Stift unten

https://codepen.io/larnott/pen/WNeErqE

0
user3284707