jQuery UI control deslizante - Deshabilitar haga clic en la barra deslizante

Question

Estoy tratando de encontrar una manera de desactivar el clic en la pista de mi jQuery UI Slider. Al hacer clic en el controlador está bien, pero no quiero que el controlador responda si el usuario hace clic en la pista.

deslizador establecido en document.ready() de la siguiente manera:

$('#navScroller').slider({ 
     value: 0, 
     start: onNavScrollStart, 
     slide: onNavScrollSlide, 
     animate: slideSpeed, 
     max: slideWidth 
}); 

He intentado tanto:

$('#navScroller').unbind('click'); 

y

$('#navScroller .ui-slider').unbind('click'); 

ninguno de los cuales trabajaban para detener el deslizador de responder a los clics de la pista.

¿Alguna idea sobre cómo lograr esto? ¡Gracias!

EDIT: acabo de descubrir que el uso de:

$('#navScroller').unbind('mousedown'); 

elimina los clics de todo el control deslizante, el mango y todo, el que está más cerca de lo que necesito, pero todavía tiene que ser capaz de arrastrar el mango.

Answer 1

Esto debe cuidar de él.

/** 
* Turns off the track click for the given slider control 
*/ 

function disableSliderTrack($slider){ 

    $slider.bind("mousedown", function(event){ 

     return isTouchInSliderHandle($(this), event); 

    }); 

    $slider.bind("touchstart", function(event){ 

     return isTouchInSliderHandle($(this), event.originalEvent.touches[0]); 

    }); 
} 

function isTouchInSliderHandle($slider, coords){ 

    var x = coords.pageX; 
    var y = coords.pageY; 

    var $handle = $slider.find(".ui-slider-handle"); 

    var left = $handle.offset().left; 
    var right = (left + $handle.outerWidth()); 
    var top = $handle.offset().top; 
    var bottom = (top + $handle.outerHeight()); 

    return (x >= left && x <= right && y >= top && y <= bottom);  
} 


    disableSliderTrack($(".ui-slider")); 

Answer 2

Como jQuery ya obligado su contenedor (deslizante) div con el evento del ratón hacia abajo, por lo que incluso si se desvincula de su div gama de ella, todavía va a disparar en el contenedor div,

aquí está la solución:

$('#navScroller .ui-slider-range').mousedown(function() { 
     return false; 
}); 

Saludos,

Answer 3

yo también tenía el mismo problema y no he podido encontrar ninguna solución a menos que decidí quitar el mango de jQuery UI sí

En ui.slider.js, Comenta estas líneas. // Enlazar el clic con el propio regulador

this.element.bind('mousedown.slider', function(e) { 
    self.click.apply(self, [e]); 
    self.currentHandle.data("mouse").trigger(e); 
    self.firstValue = self.firstValue + 1; //This is for always triggering the change event 
}); 

Answer 4

@btate tiene la idea correcta (abandonando mousedown/touchstart que no sean originarios de la manija de control deslizante), pero hay una manera más fácil para llegar allí. El objeto de evento de jQuery te dirá qué elemento inició el evento.

var sliderMouseDown = function (e) { // disable clicks on track 
    var sliderHandle = $('#navScroller').find('.ui-slider-handle'); 
    if (e.target != sliderHandle[0]) { 
     e.stopImmediatePropagation(); 
    } 
}; 

$('#navScroller') 
    .on('mousedown', sliderMouseDown) 
    .on('touchstart', sliderMouseDown) 
    .slider({ 
      value: 0, 
      start: onNavScrollStart, 
      slide: onNavScrollSlide, 
      animate: slideSpeed, 
      max: slideWidth 
    }); 

Answer 5

Sé que esto ya es viejo y contesté, pero una solución no javascript que se me ocurrió fue poner el cursor en una envoltura, el estilo de la envoltura para mirar cómo quería la pista para buscar y establecer el altura del control deslizante a 0.

Se requieren algunos ajustes de margen para que todo esté alineado, pero fue bastante fácil y funcionó perfectamente para mí.

<div class="slide-wrap"> 
    <div class="slider"></div> 
</div> 

.slide-wrap { 
    width: 300px; 
    height: 15px; 
    border: solid 1px #666; 
    margin-top: 10px; 
} 

.slider { 
    width: 100%; 
    height: 0; 
    border: none; 
    overflow: visible; 
} 

.slider .ui-slider-handle { 
    margin: 2px 0 0; 
} 

http://jsfiddle.net/83Hwf/1/

Answer 6

$("#slider").slider({ disabled: true }); 

Answer 7

Je, más de 2 años, pero, aquí está mi solución:

$('a.ui-slider-handle').on('click',function(e){ 
    e.stopImmediatePropagation(); 
    return false; 
}); 

Answer 8

Working fiddle.

var sliding = false; 

var slide = function (ev, ui) { 

    if (ev.originalEvent.type !== 'mousemove') { 
     sliding = false; 
     return false; 
    } 

    sliding = true; 

    console.log("I'm sliding."); 

}; 

var start = function (ev, ui) { 

    if (!sliding) { 
     console.log("I'm not sliding."); 
    } 

}; 

var stop = function (ev, ui) { 

    sliding ? console.log('I slid.') : console.log('I clicked.'); 

    sliding = false; 

}; 

$('#slider').slider({ 
    slide: slide, 
    start: start, 
    stop: stop, 
}); 

Answer 9

Hay una solución no-JS a esto también, utilizando sólo dos líneas de CSS:

/* Supress pointer events */ 
#navSlider { pointer-events: none; } 
/* Enable pointer events for slider handle only */ 
#navSlider .ui-slider-handle { pointer-events: auto; } 

Answer 10

Ésta hizo el truco para mí (sólo asegúrese de separar el Lister suceso de documento al destruir el objeto deslizante)

  <!doctype html> 
      <html lang="en"> 
      <head> 
       <meta charset="utf-8"> 
       <title>jQuery UI Slider - Default functionality</title> 
       <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
       <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
       <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

       <style> 
       .slider.ui-slider-disabled { 
        opacity: 1; 
       } 
       </style> 

       <script> 

       $(function() { 

       $(".slider").slider({ 
        range: true, 

        create: function(event, ui) { 

         var disabled = true; 
         $(".slider").slider("disable"); 

         $('.ui-slider-handle').on('mousedown', function(event) { 
          disabled = false; 
          $(".slider").slider("enable"); 
         }); 

         $(document).on('mouseup', function(event) { 
          if (!disabled) { 
          $(".slider").slider("disable"); 
          disabled = true; 
          } 
         }); 
        } 
       }); 

       }); 

       </script> 



      </head> 
      <body> 
      <div class="slider"></div> 

      </body> 
      </html> 

Answer 11

Prueba esto:

$("#slider").slider({ disabled: true }); 

Answer 12

Después de haber pasado un tiempo buscando una solución o algo que me ayudaría a acercarme más a lo que buscaba, se me ocurrió lo siguiente, que parece funcionar en todos los navegadores:

var _sliderEvents = [];  

    $('.slider').each(function (i) { 
     var _slider = $(this); 
     _sliderEvents.push($._data(_slider[0]).events.mousedown); 
     $._data(_slider[0]).events.mousedown = {}; 
     _slider.on({ 
      mouseenter: function() { 
       $._data(_slider[0]).events.mousedown = _sliderEvents[i]; 
      }, 
      mouseleave: function() { 
       $._data(_slider[0]).events.mousedown = {}; 
      } 
     }, '.ui-slider-handle'); 
    }); 

http://jsfiddle.net/digits/fxef8398/ Eres :) recepción

Answer 13

Sólo tiene que añadir el comportamiento : ninguno

 
noUiSlider.create(monday_shift_time_slider, { 
    behaviour: "none" 
});