Добавить отступы к слайдеру пользовательского интерфейса jQuery

Хорошо, я сам часто хотел этого, но у меня никогда не было мотивации сесть и что-то в этом роде. Поскольку вы спросили сейчас, я сел и взломал ползунок пользовательского интерфейса jQuery, чтобы добавить параметры заполнения, как вы просили.

Примечание. Я добавил его только для горизонтальных ползунков с одной ручкой. Остальные случаи не сложнее. У меня просто не было мотивации печатать и последующее тестирование, чтобы охватить случаи, которые, вероятно, сейчас не нужны.

Включите этот код после того, как вы включили исходный слайдер из пользовательского интерфейса jQuery. Расширение перезаписывает пару методов и добавляет параметры «paddingMin» и «paddingMax» в виджет Slider (значения должны быть числовыми и будут интерпретироваться как пиксели; очевидно, это также может быть легко расширено, чтобы принимать другие единицы измерения, но опять же подразумевал бы больше ввода/тестирования для незапрошенных в настоящее время случаев).

Простой пример использования:

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

Код взлома расширения (предоставляется как есть, не судитесь со мной):

(
    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);

Будет ли «привязка к шагам» в сочетании с «несовместимыми» (неравномерными значениями привязки) минимальными и максимальными значениями желаемого эффекта? Я знаю, что это, скорее всего, приведет к преобразованию значений на стороне приложения, поскольку это, вероятно, не может быть получено с использованием значений, используемых сейчас, но вот «решение» «взломать и слэш», если оно работает.

Я предлагаю установить минимальное значение, скажем, 750. Значение привязки к 1200 и максимальное значение к 4050. Таким образом, самое низкое значение привязки будет на 450 выше минимального значения, и ползунок никогда не должен достигать крайнего левого края. То же самое для максимального значения: 3 x 1200 + 450 = 4050. Используемые здесь значения произвольны и приведены только для примера.

Не проверял это и понятия не имею, работает ли это, и я знаю, что это не то, что вы искали, а просто идея, которая пришла в голову, когда я проверил примеры того, как слайдер пользовательского интерфейса jquery работает на jqueryui.com.

Изменить: не мог отпустить это, и теперь я знаю, что это работает таким образом, что ползунок не достигает концов слайда. Вам просто нужно установить начальное значение соответствующим образом, чтобы ползунок не находился в одном конце или в другом при загрузке страницы.