jQuery UI: control deslizante suave con una instantánea (al valor predeterminado)?

Question

Me gustaría hacer un control deslizante que encaje en el centro mientras retiene la acción suave en otros lugares. Algo así como una versión jQuery de un control deslizante de equilibrio de altavoces de la vida real. ¿Es posible?

¿O debería simplemente crear mi propio control deslizante con un objeto que se puede arrastrar, restringido a un eje que lo contenga, ajustándolo a otro objeto (o cuadrícula) ubicado en el centro del encuadre?

Editar: Simplemente necesito un control deslizante que permita valores, p. de -10 a -1, 0 y de 1 a 10 (entre -1 y 1 ajuste a 0) con el paso: 0.1

Answer 1

Usted debe ser capaz de utilizar el control deslizante jQuery, pero restringir su movimiento con el slide event:

jSlider.slider({ 
    // other options... 
    slide: function (event, ui) { 
     if (ui.value > -1 && ui.value < 1 && ui.value != 0) { 
      // force it to 0 between -1 and 1. 
      jSlider.slider('value', 0); 
      return false; 
     } 
     return true; 
    } 
}); 

Answer 2

Hmmm ... así que esto es lo que estoy imaginando en mi cabeza ... A Fondo que se desliza en un temporizador como un carrusel (quizás estas son imágenes grandes), con una fila de miniaturas en la parte superior que se desliza suavemente. Que es lo que quieres construir?

EDIT: Esto es lo que tiene que hacer:

que rara vez se encuentra la necesidad de utilizar plugins jQuery. Esto es lo que necesita:

1. Mousedown (en el control deslizante). api.jquery.com/mousedown/. Hay una devolución de llamada en el mouse y un lanzamiento de encendido.

2. posición del ratón pista interior del contenedor deslizante mientras se está arrastrando el control deslizante docs.jquery.com/Tutorials:Mouse_Position

3. Utilice la función de animar a mover el deslizador mientras el puntero del ratón aún no ha sido puesto en libertad api.jquery.com/animate/ Detener la animación en el lanzamiento.

4. Cuando su control deslizante llega a una cierta posición x en su contenedor, fuerce la función "suave", es decir, una función animada diferente.

Answer 3

Utilice la siguiente para que su control deslizante jQuery se ajusta automáticamente al más cercano en el paso. El truco es implementar su propio control deslizante de intervalo de pasos. El problema es que si su máximo y mínimo están separados por una pequeña distancia (por ejemplo, 5-10), su diapositiva se comportará en pasos porque el paso predeterminado es 1, por lo que debe calcular su paso en función de eso. Si sus valores máximo-mínimo están separados por una gran distancia (por ejemplo 1-1000 o más) puede dejar el cálculo computed_step e inicializar a 1.

 max_limit = 30; 
     min_limit = 5; 
     stick_to_steps_of = 5; 
     var computed_step = max_term/100; //you can vary the denominator to make it smoother 
     $("#my_slider").slider({ 
      animate : true, 
      value: max_limit, 
      min: min_limit, 
      max: max_limit, 
      step: computed_step, 
      stop: function(event, ui) { 
       d = parseInt(parseInt(ui.value)/stick_to_steps_of); 
       rem = parseInt(ui.value)%stick_to_steps_of; 
       var fval = 0; 
       if (rem <= parseInt(stick_to_steps_of/2)) { 
        fval = d*stick_to_steps_of; 
       }else{ 
        fval = (d+1)*stick_to_steps_of; 
       } 
       $("#my_slider").slider('option', 'value', fval); 
       $('#myslider_current_value').html(fval); //some placeholder to show the current value 
      } 
     });