Curseur de l'interface utilisateur jQuery: déplacez la valeur le long (avec) le descripteur

J'ai utilisé le composant slider jQuery UI dans ma page pour définir un gamme de prix.
Je peux aussi utiliser leur interface utilisateur.les valeurs de[] pour régler et afficher les nouvelles valeurs dans les autres divs.

Comment puis-je faire pour voir la nouvelle valeur en vertu de la poignée. I. e. si je déplace la
poignée de 100$, je veux mettre le "$100" texte juste en dessous de cette poignée.

BTW, j'utilise la gamme de la version - une gamme de prix, j'ai donc eu DEUX poignées sur mon curseur (min & max).

var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
        range: true,
        min: minPriceRange,
        max: maxPriceRange,
        step: 10,
        values: [ minPriceRange, maxPriceRange ],
        slide: function( event, ui ) {
            ("#fromRangeText").text("$" + ui.values[ 0 ]);
            $("#toRangeText").text("$" + ui.values[ 1 ]);
        }
});

source d'informationauteur Dan

  1. 21

    Vous pouvez utiliser le .position fonction d'utilité de jQuery UI pour positionner les étiquettes:

    $("#slider").slider({
    ...
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };

        //wait for the ui.handle to set its position
        setTimeout(delay, 5);
    }
});

    Voir action: http://jsfiddle.net/william/RSkpH/1/.

  2. 6

    Je voudrais juste mettre les étiquettes à l'intérieur des poignées, au lieu de les repositionner tout le temps, comme dans cette réponse: https://stackoverflow.com/a/7431057/1250436 

    $("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: 'slow',
    create: function() {
        $('#min').appendTo($('#slider a').get(0));
        $('#max').appendTo($('#slider a').get(1));
    },
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); }
});

    Mise à jour

    Cela ne fonctionne pas avec Chrome pour Linux. Une étrange gfx erreur se produit.

    Voir le travail de démonstration: http://jsfiddle.net/ohcibi/RvSgj/2/

  3. 2

    changement => Cet événement est déclenché sur la diapositive arrêter, ou si la valeur est modifiée par programmation (par la méthode de la valeur). Des arguments de l'événement et de l'interface utilisateur. L'utilisation de l'événement.originalEvent pour détecter si la valeur a changé par la souris, le clavier ou par programmation. Utilisation de l'interface utilisateur.valeur (unique manche curseurs) pour obtenir la valeur du courant handle, $(this).curseur ("valeurs", des index) pour obtenir une autre valeur de la poignée.

    http://docs.jquery.com/UI/Slider#event-change

  4. 2

    Je poursuit le même objectif et j'ai décidé d'aller avec Bootstrap est les info-bulles. Vous pouvez essayer le code sur cette JSFiddle.

    $('#slider').slider({
    range: true,
    min: -60,
    max: 60,
    values: [ init_start_at, init_end_at ],
    slide: function(event, ui) {
        //Allow time for exact positioning
        setTimeout( function(){
            $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show');
        }, 5);
    },
    create: function( event, ui ) {
        var target = $(event.target);
        var handles = $(event.target).find('a');
        var container, wait;

        //Wait for the slider to be in position
        (wait = function() {
            if ((container = target.parents('.content')).length != 0) {
                handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show');
                handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show');
            } else {
                setTimeout( wait, 50 );
            }
        })();
    }
});

    Espère que cela aide quelqu'un.

  5. 2

    Il est possible de créer un joli curseur en incluant bootstrap info-bulles. Voici une version mise à jour du curseur à l'aide de bootstrap, les info-bulles. http://jsfiddle.net/ykay/jL044k1c/

    function slide(event, ui) {
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');
    handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show');
    handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});
  6. 0

    vous pouvez le trouver si facilement dans la documentation officielle de jQyeryUI curseur de la page dans l'exemple suivant

    http://jqueryui.com/slider/#custom-handle