slider

by bullrout

HTML

<body>
<div class="sliding-area">
    <div class="slider-track">
        <div class="slider-bounds ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider" aria-disabled="false">
       

            <a id="anchorPoint" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
    </div>

</div>
<div id="dragoverlay">

</div>
<div id="distance">


</div>
<div id="movePointx">


</div>
<div id="lastmovePointx">


</div>
<div id="phase">


</div>
<div id="holdThresh">


</div>
<div id="velocity">


</div>

CSS

.sliding-area {
        padding: 0;
        margin: 30px 0px 0px 0px;
        width: 360px;
        height: 100px;
        overflow: hidden;
        position: relative;
       background-color: green;
        z-index: -1;
        margin: 120px 0 0 80px;
    }

    .slider-track {
        display: block;
        overflow: hidden;
        border: 1px solid #c9c3ba;
        width: 360px;
        height: 80px;
        margin: 0 auto;
        position: relative;
        background-color: #ff0000;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: inset 0px 1px 1px -1px rgba(0,0,0, 0.3);
        -moz-box-shadow: inset 0px 1px 1px -1px rgba(0,0,0, 0.3);
        box-shadow: inset 0px 1px 1px -1px rgba(0,0,0, 0.3);
        z-index: -1;
    }

    .slider-bounds {
        width: 360px;
        height: 80px;
        position: absolute;
        padding: 0;
        margin: 0;
        left:0;
        top: 1px;
        z-index: -1;
        background: orange;
    }

    .ui-slider-handle, .ui-slider-handle:link, .ui-slider-handle:visited, .ui-slider-handle:hover, .ui-slider-handle:focus, .ui-slider-handle:hover:active {
        position: absolute;
        z-index: 2;
        width: 80px;
        height: 38px;
        cursor: pointer;
        top: 0px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: -20px;
        padding: 0;
        border: 1px solid #894373;
        background-color: #621a4b;
        background-image: -moz-linear-gradient(top, #894373, #631b4c);
        background-image: -o-linear-gradient(top, #894373, #631b4c);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#894373),...

JavaScript

(function(g){g.touchyOptions={useDelegation:!1,longpress:{preventDefault:{start:!0,move:!0,end:!0},requiredTouches:1,msThresh:800,triggerStartPhase:!1,data:{startDate:null},proxyEvents:["TouchStart","TouchEnd"]},drag:{preventDefault:{start:!0,move:!0,end:!0},requiredTouches:1,msHoldThresh:100,data:{startPoint:null,startDate:null,movePoint:null,moveDate:null,held:!1},proxyEvents:["TouchStart","TouchMove","TouchEnd"]},pinch:{preventDefault:{start:!0,move:!0,end:!0},requiredTouches:2,pxThresh:0,data:{startPoint:null,
    startDate:null,movePoint:null,moveDate:null},proxyEvents:["TouchStart","TouchMove","GestureChange","TouchEnd"]},rotate:{preventDefault:{start:!0,move:!0,end:!0},requiredTouches:1,data:{},proxyEvents:["TouchStart","TouchMove","GestureChange","TouchEnd"]},swipe:{preventDefault:{start:!0,move:!0,end:!0},requiredTouches:1,velocityThresh:1,triggerOn:"touchmove",data:{startPoint:null,startDate:null,movePoint:null,moveDate:null},proxyEvents:["TouchStart","TouchMove","TouchEnd"]}};var t={handleTouchStart:function(a){var b=
    this.context,e=j(a,b);if(e){var d=a.originalEvent,f=d.targetTouches,c="touchy"+b.charAt(0).toUpperCase()+b.slice(1),c=e.data(c),m=c.settings;m.preventDefault.start&&d.preventDefault();if(f.length===m.requiredTouches)switch(b){case "drag":p(c,f,a.timeStamp);a=c.startPoint;e.trigger("touchy-drag",["start",e,{movePoint:a,lastMovePoint:a,startPoint:a,velocity:0}]);break;case "swipe":q(c,f,a.timeStamp);break;case "pinch":if(b=n(a))c.startPoint={x:b.centerX,y:b.centerY},c.startDistance=Math.sqrt(Math.pow(b.x2-
    b.x1,2)+Math.pow(b.y2-b.y1,2));break;case "longpress":c.startPoint={x:f[0].pageX,y:f[0].pageY};c.startDate=a.timeStamp;m.triggerStartPhase&&e.trigger("touchy-longpress",["start",e]);c.timer=setTimeout(g.proxy(function(){e.trigger("touchy-longpress",["end",e])},this),m.msThresh);break;case...