Añadir relleno a jQuery UI Slider

Question

¿Hay alguna manera fácil de agregar relleno a la barra deslizante de un control deslizante jQuery UI? Me gustaría poder hacer que el control deslizante no llegue a los extremos de la barra. Así que si este es el final regular de la izquierda:

no padding 
\/ 
[]------------------ 

me gustaría que tenga el relleno de la izquierda (y derecho) final:

padding of 10px for instance 
\/ 
--[]---------------- 

yo probamos este en el archivo CSS:

.ui-slider-horizontal { height: .8em; padding: 0 10px; }

Pero parece deslizante jQuery UI utiliza el del (outerWidth()) de anchura completa para determinar el rango de deslizamiento del mango, en lugar de la anchura sin el PA dding. También intenté hackear el código, reemplazando outerWidth() con width(), pero no hizo nada.

explícitamente no quiero recurrir a un truco de configuración de valores mínimos y máximos. Los valores siempre deberían seguir funcionando como se esperaba.

¿Alguna sugerencia?

Editar:

Siguiendo el comentario de pkauko; Estoy utilizando el control deslizante como un elemento que tiene tres etiquetas por encima de ella:

not      very 
important important important 
----[]-----------[]----------[]---- 

La ilustración de arriba indica las posiciones en las que desea que aparezca el mango, centradas por debajo de las etiquetas. Pero la barra visualmente necesita estirarse hasta los bordes.

Answer 1

Ok, a menudo he querido eso, pero nunca tuve la motivación para sentarme, y algo sobre eso. Como me lo preguntó ahora, me senté y pirateé el control deslizante de la interfaz de usuario de jQuery para agregar las opciones de relleno a medida que me pedía.

Nota: Solo lo he agregado para controles deslizantes horizontales con una sola asa. Los otros casos no son más complicados. Simplemente no tenía la motivación para escribir y las pruebas posteriores para cubrir casos que probablemente no eran necesarios en este momento.

Incluye este código después de haber incluido el control deslizante original de jQuery UI. La extensión sobrescribe un par de métodos y agrega las opciones 'paddingMin' y 'paddingMax' al widget Slider (los valores deben ser numéricos y se interpretarán como píxeles; esto también se puede extender fácilmente para tomar otras unidades, obviamente, pero de nuevo implicaría más tipeo/prueba para casos actualmente no solicitados).

simple ejemplo de uso:

$('#slider').slider({ paddingMin: 50, paddingMax: 100 }); 

código de truco de extensión (siempre como es, no demandarme):

(
    function($, undefined) 
    { 
     $.ui.slider.prototype.options = 
      $.extend(
       {}, 
       $.ui.slider.prototype.options, 
       { 
        paddingMin: 0, 
        paddingMax: 0 
       } 
      ); 

     $.ui.slider.prototype._refreshValue = 
      function() { 
       var 
        oRange = this.options.range, 
        o = this.options, 
        self = this, 
        animate = (!this._animateOff) ? o.animate : false, 
        valPercent, 
        _set = {}, 
        elementWidth, 
        elementHeight, 
        paddingMinPercent, 
        paddingMaxPercent, 
        paddedBarPercent, 
        lastValPercent, 
        value, 
        valueMin, 
        valueMax; 

       if (self.orientation === "horizontal") 
       { 
        elementWidth = this.element.outerWidth(); 
        paddingMinPercent = o.paddingMin * 100/elementWidth; 
        paddedBarPercent = (elementWidth - (o.paddingMin + o.paddingMax)) * 100/elementWidth; 
       } 
       else 
       { 
        elementHeight = this.element.outerHeight(); 
        paddingMinPercent = o.paddingMin * 100/elementHeight; 
        paddedBarPercent = (elementHeight - (o.paddingMin + o.paddingMax)) * 100/elementHeight; 
       } 

       if (this.options.values && this.options.values.length) { 
        this.handles.each(function(i, j) { 
         valPercent = 
          ((self.values(i) - self._valueMin())/(self._valueMax() - self._valueMin()) * 100) 
          * paddedBarPercent/100 + paddingMinPercent; 
         _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; 
         $(this).stop(1, 1)[ animate ? "animate" : "css" ](_set, o.animate); 
         if (self.options.range === true) { 
          if (self.orientation === "horizontal") { 
           if (i === 0) { 
            self.range.stop(1, 1)[ animate ? "animate" : "css" ]({ left: valPercent + "%" }, o.animate); 
           } 
           if (i === 1) { 
            self.range[ animate ? "animate" : "css" ]({ width: (valPercent - lastValPercent) + "%" }, { queue: false, duration: o.animate }); 
           } 
          } else { 
           if (i === 0) { 
            self.range.stop(1, 1)[ animate ? "animate" : "css" ]({ bottom: (valPercent) + "%" }, o.animate); 
           } 
           if (i === 1) { 
            self.range[ animate ? "animate" : "css" ]({ height: (valPercent - lastValPercent) + "%" }, { queue: false, duration: o.animate }); 
           } 
          } 
         } 
         lastValPercent = valPercent; 
        }); 
       } else { 
        value = this.value(); 
        valueMin = this._valueMin(); 
        valueMax = this._valueMax(); 
        valPercent = 
         ((valueMax !== valueMin) 
         ? (value - valueMin)/(valueMax - valueMin) * 100 
         : 0) 
         * paddedBarPercent/100 + paddingMinPercent; 

        _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; 

        this.handle.stop(1, 1)[ animate ? "animate" : "css" ](_set, o.animate); 

        if (oRange === "min" && this.orientation === "horizontal") { 
         this.range.stop(1, 1)[ animate ? "animate" : "css" ]({ width: valPercent + "%" }, o.animate); 
        } 
        if (oRange === "max" && this.orientation === "horizontal") { 
         this.range[ animate ? "animate" : "css" ]({ width: (100 - valPercent) + "%" }, { queue: false, duration: o.animate }); 
        } 
        if (oRange === "min" && this.orientation === "vertical") { 
         this.range.stop(1, 1)[ animate ? "animate" : "css" ]({ height: valPercent + "%" }, o.animate); 
        } 
        if (oRange === "max" && this.orientation === "vertical") { 
         this.range[ animate ? "animate" : "css" ]({ height: (100 - valPercent) + "%" }, { queue: false, duration: o.animate }); 
        } 
       } 
      }; 

     $.ui.slider.prototype._normValueFromMouse = 
      function(position) { 
       var 
        o = this.options, 
        pixelTotal, 
        pixelMouse, 
        percentMouse, 
        valueTotal, 
        valueMouse; 

       if (this.orientation === "horizontal") { 
        pixelTotal = this.elementSize.width - (o.paddingMin + o.paddingMax); 
        pixelMouse = position.x - this.elementOffset.left - o.paddingMin - (this._clickOffset ? this._clickOffset.left : 0); 
       } else { 
        pixelTotal = this.elementSize.height - (o.paddingMin + o.paddingMax); 
        pixelMouse = position.y - this.elementOffset.top - o.paddingMin - (this._clickOffset ? this._clickOffset.top : 0); 
       } 

       percentMouse = (pixelMouse/pixelTotal); 
       if (percentMouse > 1) { 
        percentMouse = 1; 
       } 
       if (percentMouse < 0) { 
        percentMouse = 0; 
       } 
       if (this.orientation === "vertical") { 
        percentMouse = 1 - percentMouse; 
       } 

       valueTotal = this._valueMax() - this._valueMin(); 
       valueMouse = this._valueMin() + percentMouse * valueTotal; 

       return this._trimAlignValue(valueMouse); 
      }; 
    } 
)(jQuery); 

Answer 2

¿Los "valores instantáneos" junto con valores "mínimos" y "incompatibles" (no iguales a los valores de ajuste) min y max dan el efecto deseado? Sé que esto probablemente conduzca a la conversión del valor del lado de la aplicación, ya que probablemente no pueda obtenerse utilizando los valores utilizados ahora, pero aquí hay una "solución" de "hack and slash" si funciona.

Lo que sugiero es establecer el valor mínimo en, digamos, 750. Ajustar el valor a 1200 y el valor máximo a 4050. De esta forma, el chasquido más bajo es 450 más alto que el valor mínimo y el control deslizante nunca debe alcanzar el extremo izquierdo borde. Lo mismo para el valor máximo, que es 3 x 1200 + 450 = 4050. Los valores utilizados aquí son arbitrarios y, por ejemplo, solo.

No he probado esto y no tengo idea de si funciona y sé que esto no es lo que estabas buscando, sino una idea que me vino a la mente cuando revisé los ejemplos de cómo funciona el control deslizante jquery UI en jqueryui .com.

Editar: no pude dejar esto y ahora sé que esto funciona de la manera que impide que el control deslizante llegue a los extremos de la diapositiva. Solo necesita establecer el valor inicial en consecuencia para evitar que el control deslizante se encuentre en un extremo u otro cuando se carga la página.