jQuery UI deslizante y el mango de modificación

Question

utilizo el control deslizante jQueryUI estándar y quiero cambiar la apariencia de la manija. me cambió el CSS para

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded; } 
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

lo hacía, para que el mango se sienta en el "slider-lane". Pero si el mango se mueve a la posición más a la derecha, se encuentra justo fuera de su carril. Por supuesto que podría establecer .ui-slider-handle 's margin-left a -20px. Pero luego en ambos extremos se solapa con su carril.

lo tiene que hacer algo con ui-slider-range-max? Pero al inspeccionar el control deslizante a través de Firebug, esta clase CSS no se usa en ninguna parte.

Answer 1

La clase ui-slider-range-max se da a la parte del alcance de una corredera con un punto máximo fijo. De esta manera: http://jqueryui.com/demos/slider/#rangemax

Si no ves esa clase en Firebug entonces tal vez no se esté usando ese tipo de control deslizante

creo que lo que están pidiendo es cómo tener parada borde izquierdo del asa en la parte el borde izquierdo del "control deslizante" y el borde derecho del mango no pasa el borde derecho del "control deslizante". Es decir: el asa que se encuentra en la barra deslizadora

Si es así, puede hacer que la manija parezca permanecer dentro del "carril deslizante" quitando primero el fondo y cualquier otra cosa visible desde el deslizador ui div.

ejemplo:

.ui-slider-horizontal { height: 10px; border: 0; background: none } 

luego envolver el control deslizante dentro de un div contenedor con sus antecedentes. El contenedor div se puede ver como el "slider-lane" y puede darle el relleno requerido para que el mango parezca permanecer dentro del slider-lane.

ejemplo:

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;} 

también restablecer el mango margin-left volver a lo que era si tiene relleno en la izquierda y la derecha en el contenedor div, de lo contrario sólo tiene que utilizar el relleno a la derecha.