web-dev-qa-db-fra.com

jQuery UI Slider: déplace la valeur avec (avec) la poignée

J'ai utilisé le composant de curseur de l'interface utilisateur jQuery dans ma page pour définir une fourchette des prix. Je peux également utiliser leurs ui.values ​​[] pour définir et afficher les nouvelles valeurs dans d'autres divs.

Comment puis-je faire pour voir la nouvelle valeur sous le handle . C'est à dire. si j'ai déplacé la poignée à 100 $, je veux définir le texte «100 $» juste sous cette poignée.

BTW, j'utilise la version de gamme - pour définir une gamme de prix, donc j'ai deux poignées sur mon curseur (min et 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 ]);
        }
});
jquery-uisliderjquery-ui-slider
15
Dan

Vous pouvez utiliser la fonction utilitaire .position à partir de l'interface utilisateur jQuery 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 l'action: http://jsfiddle.net/william/RSkpH/1/ .

21
William Niu

Je voudrais simplement 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); }
});

Mettre à jour

Cela ne fonctionne pas dans Chromium pour Linux. Une étrange erreur gfx se produit.

Voir la démo de travail: http://jsfiddle.net/ohcibi/RvSgj/2/

6
ohcibi

Il est possible de créer un curseur Nice en incluant des info-bulles d'amorçage. Voici une version mise à jour du curseur à l'aide des info-bulles d'amorçage. 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))
    }
});
2
ykay

Je poursuivais le même objectif et j'ai décidé d'y aller avec les infobulles de Bootstrap. Vous pouvez essayer le code sur ce 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 );
            }
        })();
    }
});

J'espère que ça aide quelqu'un.

2
Crystark

change => Cet événement est déclenché à l’arrêt du curseur ou si la valeur est modifiée par programme (à l’aide de la méthode value). Prend les arguments event et ui. Utilisez event.originalEvent pour détecter si la valeur a été modifiée à l'aide de la souris, du clavier ou par programme. Utilisez ui.value (curseurs à une seule poignée) pour obtenir la valeur du descripteur actuel, $ (this) .slider ('values', index) pour obtenir la valeur d'un autre descripteur.

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

2
micrub

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

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

0
mustafa-elhelbawy