jquery realizes elastic slider sliding selection numerical plugin _jquery

A slider effect similar to the Aliyun elastic calculation is made, which allows you to slide the slider freely and calculate the scale. Based on jquery implementation, little friends don't forget to load jquery OH

Css

. main {
 margin:0 auto;
 margin-top:100px;
 width:500px;
 font-family: Microsoft Ya-hei;
 -webkit-user-select:none
}
. contain {
 width:500px;
 height:40px;
 Background-color: #E8E8E8;
Track {
 width:16px;
 height:46px;
 Position:absolute;
 Margin: -3px 0 0 0px;
 Background-color: #2dacd1;
 Cursor:pointer
}
. VALUEC {
 height:40px;
 Position:absolute;
 margin:0;
 Background-color: #43BFE3;
Value span {
 position:absolute;
 Text-align:right;
 height:40px;
 line-height:40px;
 Color: #808080;
 border-right:1px solid #dddddd;
Show {
 width:45px;
 height:30px;
 Background-color: #333;
 Color: #fff;
 Text-align:center;
 line-height:30px;
 Position:absolute;
 opacity:0.9;
 Margin-top: -38px;
 Margin-left: -15px;
}

Html

<div class= "main" >
 <div class= "contain" >
  <div class= "show" >0</div>
  <div class= "Valuec" ></div>
  <div class= "value" > </div>
  <div class= "track" ></div >
 </div>
</div>

Js

<script type= "Text/javascript" src= "/js/jquery-1.8.0.min.js" ></script> <script type= "text/"
JavaScript "> $ (function () {scrollertrack.init ();}); var scrollertrack={bodywidth:500, maxvalue:300, currentx:0, currentvalue:0, count:0, Init:function () {var MWidth=S
 Crollertrack.bodywidth;
 $ (". contain"). CSS ("width", mwidth+ "px");
 var count=scrollertrack.maxvalue/50;
 Scrollertrack.count=count;
 var Itemwidth=mwidth/count;
  for (Var i=0;i<count;i++) {var span=$ ("<span>" + (i+1) *50+ "</span>");
  $ (span). CSS ("width", itemwidth+ "px"). CSS ("Margin-left", i*itemwidth+ "px");
 $ (". Value"). Append (span);
 } scrollertrack.value ();
  }, Value:function () {var currentvalue;
  var Ismoving=false;
  Scrollertrack.currentx=$ (". Track"). Offset (). Left;
  $ (". Track"). MouseDown (function () {var target=$ (this). parent ();
  Ismoving=true;
   $ ("Html,body"). MouseMove (function (event) {if (ismoving==false) return;
        var changex = Event.clientx-scrollertrack.currentx; CurrentValue = Changex-scrollertrack.currentx;
   if (changex<=0) {$ (target). Find (". Track"). CSS ("Margin-left", "0px");
   $ (target). Find (". Valuec"). CSS ("width", "0px");
   $ (target). Find (". Show"). CSS ("Margin-left", " -15px");
   $ (target). Find (". Show"). HTML (0);
   scrollertrack.currentvalue=0; else if (changex>=scrollertrack.bodywidth-16) {$ (target). Find (". Track"). CSS ("Margin-left"),
   scrollertrack.bodywidth-16+ "px");
   $ (target). Find (". Valuec"). CSS ("width", scrollertrack.bodywidth-16+ "px");
   $ (target). Find (". Show"). CSS ("Margin-left", scrollertrack.bodywidth-31+ "px");
   $ (target). Find (". Show"). html (scrollertrack.maxvalue);
   Scrollertrack.currentvalue=scrollertrack.maxvalue;
   } else{$ (target). Find (". Track"). CSS ("Margin-left", changex+ "px");
   $ (target). Find (". Valuec"). CSS ("width", changex+ "px");
   $ (target). Find (". Show"). CSS ("Margin-left", changex-15+ "px");
   var v=scrollertrack.maxvalue* ((changex+16)/scrollertrack.bodywidth); $ (target). Find (". Show"). HTML (parseint (v));
   Scrollertrack.currentvalue=parseint (v);
  }
  });
  });
  $ ("Html,body"). MouseUp (function () {ismoving=false;
 });
 }} </script>

Demo diagram:

Demo Address: http://demo.jb51.net/js/2015/jquery-txhk/

Also recommend a range selector plug-in Jrange, it is based on a simple jquery plug-in. Here we look at the use of plug-in jrange.

Html
First load the jquery library file and Jrange related CSS files: jquery.range.css and plugins: jquery.range.js

<script src= "Jquery.js" ></script> 
<link rel= "stylesheet" href= "Jquery.range.css" > 
< Script src= "Jquery.range.js" ></script> 

Then put the following code where you want to display the slider selector:

<input type= "hidden" class= "Slider-input" value= "a"/> 

We used the Hiiden type of text field and set the default value, such as 23.

Jquery

Calling the Jrange plug-in is very simple, using the following code directly:

 
$ ('. Single-slider '). Jrange ({ 
  from:0, 
  to:100, 
  step:1, 
  scale: [0,25,50,75,100], 
  format: '%s ', 
  width:300, 
  showlabels:true, 
  showscale:true 
}); 

For more information, please refer to the Jrange project website: https://github.com/nitinhayaran/jRange