web-dev-qa-db-fra.com

Comment tirer profit du curseur de l'interface utilisateur jQuery?

Je travaille sur http://gamercity.info/ymusic/ . Et j'utilise le curseur de l'interface utilisateur comme barre de recherche . Pendant la lecture de la vidéo, je souhaite appeler une fonction seekTo(seconds) si l'utilisateur a cliqué n'importe où sur la barre de recherche. Comment obtenir la nouvelle valeur de seconds après l'événement de clic?

javascriptjqueryuser-interfacejquery-uijquery-ui-slider
36
atinder

Pour lire la valeur du curseur/pourcentage à tout moment:

var val = $('#slider').slider("option", "value");
69
chad.mellor
$('#slider').slider({
    change: function(event, ui) { 
        alert(ui.value); 
    } 
});​

http://jqueryui.com/demos/slider/

26
Ben
var val = $("#slider").slider("value");
15
wal

J'ai vérifié toutes les réponses mentionnées ci-dessus, mais n'en ai trouvé aucune utile comme code suivant:

$('#slider').slider("values")[0]; // for slider with single knob or lower value of range
$('#slider').slider("values")[1]; // for highest value of range

Testé avec jQuery v2.1.1 et jQuery-ui v1.12.1

7
Kiran Shakya
$("#slider").slider(
{
            value:100,
            min: 0,
            max: 500,
            step: 50,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
            }
}
);

JS FIDDLE EXAMPLE: http://jsfiddle.net/hiteshbhilai2010/5TTm4/1162/

vous pouvez avoir une fonction comme celle-ci

function seekTo(seek_value)
{
$("#slider").slider('option', 'value',seek_value);

}
5
Hitesh

Vous pouvez passer la valeur à n'importe quelle fonction ou définir n'importe quel élément avec la valeur:

$(function () {
    $('#slider').slider({
        max: 100,
        slide: function (event, ui) {
            $('#anyDiv').val(ui.value);
        }
    });
});
0
Israel Margulies

En retard à la fête mais cette question est toujours sans réponse.

L'exemple ci-dessous vous montrera comment obtenir une valeur de modification dans un champ de saisie à enregistrer dans DB:

$( "#slider-videoTransparency" ).slider({            
  value: "1",
  orientation: "horizontal",
  range: "min",
  max: 30,
  animate: true,
  change: function (e, ui) {

    var value = $(this).slider( "value" );
    $('.video_overlay_transparency').val(value);
  }  
});
<div id="slider-videoTransparency" class="slider-danger"></div>

<input type="hidden" name="video_overlay_transparency" class="video_overlay_transparency" value="">

0
Webistan
var value=document.getElementById('slider').value;
var a=value.split("specialName")//name=special charcter between minimum and maximum rang
var b=a[0];//this will get minimum range
var c=a[1];//this will get maximum range
0
shahbaj khan
  // Price Slider
        if ($('.price-slider').length > 0) {
            $('.price-slider').slider({
                min: 0,
                max: 2000,
                step: 10,
                value: [0, 2000],
                handle: "square",


            });
        }



$(document).ready(function(){

 $(".price-slider").on( "slide", function( event, ui ) {  console.log("LA RECTM");  var mm = $('.tooltip-inner').text(); console.log(mm);   var divide = mm.split(':');   console.log( "min:" +divide[0] + " max:" + divide[1] )     } );




})
0
Andy Cancho