jQuery UI Slider - Set handler between two steps as default value

Question

is it possible to set the default value of a slider between two steps as default (initializing)

$( ".slider" ).slider({
    value: 25,
    min: 0,
    max: 50,
    step: 10,
    slide: function( event, ui ) {
        //$( "#amount" ).val( "$" + ui.value );
    },
    disabled: false
});

will not work.

i also tried to set the css style to:

.ui-slider-handle {
left: 50%;
}

but the plugin will reset the value

---

Update

i removed the step option on initializing the slider. after the slider starts sliding i will set the step to 10 this will be the desired result

$( ".slider" ).slider({
    value: 25,
    min: 0,
    max: 50,
    start: function( event, ui ) {
        $(this).slider("option", "step", 10);
    },
    slide: function( event, ui ) {
    },
    disabled: false
});

---

Update 2

this solutions stucks if i drag the handler one step to the right, it jumps to the second step on the right side. any explanation on this behavior?

Answer 1

set handler between to steps

sice jquery will not support my pull request https://github.com/jquery/jquery-ui/pull/1387 i wrote a little code snippet that will extend the ui.silder widget

// redefining the ui.slider widgets
        $.widget( "ui.slider", $.ui.slider, {
            _trimAlignValue: function( val ) {
                if ( val <= this._valueMin() ) {
                    return this._valueMin();
                }
                if ( val >= this._valueMax() ) {
                    return this._valueMax();
                }
                var step = ( this.options.step > 0 ) ? this.options.step : 1,
                    valModStep = (val - this._valueMin()) % step,
                    alignValue = val - valModStep;

                if(this.options.initValue == val && Math.abs(valModStep) < step){
                    alignValue += valModStep;
                }else if ( Math.abs(valModStep) * 2 >= step ) {
                    alignValue += ( valModStep > 0 ) ? step : ( -step );
                }
                return parseFloat( alignValue.toFixed(5) );
            }
        });

for now you can create a slider with "initValue"

$( ".slider").slider({
                step: 10,
                min: 10,
                value: 35,
                initValue: 35,
                max: 60})