Implementation of the mouse drag-and-drop slider-attached source download _jquery based on jquery

Before you step into the body of the text, first put the effect map to see if you want the effect:

Online Demo Source Download

Drag the setup code based on the jquery Move end slider. This is a support mobile phone mobile end of the effect, you can drag the slider range selector, drag the slider value selector.

No more nonsense to say, directly to everyone paste code.

HTML code:

<div class= "Demo" >
    <input type= "hidden" class= "Single-slider" value= "0"/>
    <!--<button id= "G1" > Get value </button>-->
  </div>
  <div class= "Demo" >
    <input class= "Range-slider "Type=" hidden "value=" 10,89 "/>
    <!--<button id=" G2 "> Get value </button>-->
  

JS Code:

$ (function () {
     $ ('. Single-slider '). Jrange ({
       from:0,
       to:100,
       step:1,
       scale: [0, 25, 50, 75, 100],
       format: '%s ',
       width:300,
       showlabels:true,
       showscale:true
     });
     $ ('. Range-slider '). Jrange ({
       from:0,
       to:100,
       step:1,
       scale: [0, M, MB],
       format: '% S ',
       width:300,
       showlabels:true,
       isrange:true
     });
     $ ("#g1"). Click (function () {
       var AA = $ (". Single-slider"). Val ();
       alert (AA);
     });
     $ ("#g2"). Click (function () {
       var AA = $ (". Range-slider"). Val ();
       alert (AA);
     });
   };