Self-adjusting sliders (jQM)

The slider will automatically adjust its range upon selecting either the (current) min or max value. The size of the range will be preserved if possible.

HTML

<div data-role="page">
    <div data-role="content">
        <h1>Sliders</h1>
        
        <p><h2>Responsibility</h2> The amount that you are responsible</p>
       	<input data-role="slider" data-self-adjusting="true" edge-distance="0.2" min="0" absolute-min="0" max="100" absolute-max="100" value="50" id="sl1" />
        <br /><br />
        <p><h2>Control</h2> The extent to which you are able to affect an outcome. </p>
	    <input data-role="slider" data-self-adjusting="true" edge-distance="0.5" min="0" absolute-min="0" max="100" absolute-max="100" value="50" />
    </div>
</div>

CSS

h1 {
	font-size: larger;
    margin-bottom: 25px;
}

h1, h2 {
    font-weight: bold;
}

JavaScript

/**
   jQuery Mobile -- Feature Proposal: Self-adjusting sliders
   @author Ingo Bürk
   
   Description: The slider will automatically adjust its range upon selecting either the (current)
   min or max value. The size of the range will be preserved if possible.
   
   Usage: Simply create a slider and add 'data-self-adjusting="true"' to it.
   
   Parameters:
   - 'edge-distance="x"' with x a floating point in [0,1): Defines how far the slider will be
     away from the edge after adjusting the range. Default value is 0.1 (= 10%).
   - 'absolute-min="x"' / 'absolute-max="x"' with x any integer: The borders beyond which the slider
     will never auto-adjust. If no value is given, there will be no such border.
*/

// Listen to slidestop for slider dragging and keyup for manual changes to the input field
$( document ).on( 'slidestop keyup', ':jqmData(self-adjusting="true")', function ( event ) {
    var newValue = parseInt( $( this ).val() ),
        oldMin   = parseInt( $( this ).attr( 'min' ) ),
        oldMax   = parseInt( $( this ).attr( 'max' ) ),
        
        diff = oldMax - oldMin,
        distanceFromEdgeFactor = parseFloat( $( this ).attr( 'edge-distance' ) ),
            
        // avoid bug by checking the correct event
        eventType = event.type || event.originalEvent.type;

    // We purposely allow it to be exactly 0 (no distance) but not exactly 1 (that wouldn't make sense).
    if ( isNaN( distanceFromEdgeFactor ) || distanceFromEdgeFactor < 0 || distanceFromEdgeFactor >= 1 ) {
        distanceFromEdgeFactor = 0.1;
    }
    var distanceFromEdge = distanceFromEdgeFactor * diff;
    
    var absoluteMin = parseInt( $( this ).attr( 'absolute-min' ) ),
        hasAbsoluteMin = !isNaN( absoluteMin ),
        absoluteMax = parseInt( $( this ).attr( 'absolute-max' ) ),
        hasAbsoluteMax = !isNaN( absoluteMax );
    
    var newMin, newMax;
    
    // dragging slider all the way to the left
    if ( newValue === oldMin && eventType ===...