jquery Plugin Slider Implementation drag slider select Price range _jquery

On some product quotation sites, you need to give a range of price ranges for users to filter, we add a custom price range outside the scope of the filter, which provides a way for users to choose more. This article will use the jquery plug-in combined with CSS to achieve the use of sliding slider to select the price range, please see this article.

The JQuery UI has a slider plug-in, which is a very good drag slider plug-in. To implement the slider drag, you need to load the following JS between the page head.

<script type= "Text/javascript" src= "js/jquery.js" ></script> 
<script type= "Text/javascript" src= "Js/ui/jquery.ui.core.js" ></script> 
<script type= "Text/javascript" src= "js/ui/" Jquery.ui.widget.js "></script> 
<script type=" Text/javascript "src=" Js/ui/jquery.ui.mouse.js "> </script> 
<script type= "Text/javascript" src= "Js/ui/jquery.ui.slider.js" ></script> 

Of course, if you consider the efficiency of the project, you can compress the above several JS into a JS, we need to consider these in large Web application projects.
You can download these related JS to the jquery UI website,
Next, we build the main HTML code:

<ul class= "Price_list" > <li class= "title" > Price range:</li> <li><a href= "#" >3000 yuan below </a&gt ;</li> <li><a href= "#" >3000-4000 yuan </a></li> <li><a href= "#" >4000-5000 yuan </a></li> <li><a href= "#" >5000-6000 yuan </a></li> <li><a href= "#" >6000 -7000 Yuan </a></li> <li><a href= "#" >7000-8000 yuan </a></li> <li><a href= "#" & gt;8000-9000 </a></li> <li><a href= "#" >9000-10000 Yuan </a></li> <li><a href= "#" >10000 above </a></li> <li id= "Custom" ><a href= "javascript:;" id= "show" > Custom </a > <div id= "slider_wrap" > <div id= "Slider" > <div id= "range" ></div> < /div> <p><input type= "text" class= "input" id= "start" value= "0"/>-<input type= "Text" class = "Input" id= "End" value= "3000"/> &lT;input type= "button" class= "btn" id= "Btn_ok" value= "OK"/></p> </div> </li> </ul> 
 

The price range consists of a series of Li, the last of which Li, we give it a set ID of custom, and in it contains the need to show the slider selection div#slider_wrap, of course, by default, the Div is hidden. We need to use CSS to achieve the appearance effect.

Css

Through CSS, make the page have a good-looking appearance:

. Price_list{list-style:none}. price_list li{float:left line-height:22px; margin-right:10px padding:2px 6px} price_ 
list li.title{display:block; width:60px; height:60px;} #custom {border:1px solid #d3d3d3; padding:0 16px 0 2px; Background:url (images/icon.gif) No-repeat right 8px; 
Position:relative;} 
. Custom_show{background:url (Images/icon.gif) No-repeat right 18px;} #show {width:100% height:26px}. input{width:66px height:20px; line-height:20px; border:1px Solid #d3d3d3}. : 54px; height:24px; line-height:24px; Background:url (images/btn_bg.gif) repeat-x; border:1px solid #d3d3d3; 
Cursor:pointer} #slider_wrap {width:250px; height:80px; padding:10px; position:absolute; left:-1px; top:22px; border:1px solid #d3d3d3; Background: #fff; Display:none; z-index:1001} #slider {width:230px; height:40px; margin:5px auto; border:none; Background:url (images/line_bg.gif) 
 No-repeat} #range {width:220px margin-left:4px} #slider_wrap p{width:230px; margin:4px Auto}

The key is to eject the div to display the sliding selection of the CSS, through absolute and relative positioning to determine the location of the display layer.
The CSS for the slider widget in the presentation layer comes from the CSS with the jquery UI, and I made some minor changes.

. ui-slider {position:relative; Text-align:left} 
. Ui-slider. ui-slider-handle {position:absolute; z-index:2; width:11px; height:14px 
; Cursor:default; Background:url (images/arr.gif) No-repeat} 
. Ui-slider. ui-slider-range {position:absolute; z-index:1; display: Block border:0; 
Background: #f90} 
. ui-slider-horizontal {height:10px} 
. Ui-slider-horizontal. ui-slider-handle {top:14px; margin-left:0;} 
. Ui-slider-horizontal. ui-slider-range {top:20px; height:4px;} 
. Ui-slider-horizontal. ui-slider-range-min {left:0} 
. Ui-slider-horizontal. Ui-slider-range-max {right:0;} 

Jquery

First of all, we need to click "Custom" when the Drop pop-up slider range shows the layer. When you click "Custom", the drop down layer is displayed and the arrow style is changed, and the drop down layer is hidden when clicked again.

$ (function () { 
  $ ("#show"). Click (function () { 
    if ($ ("#slider_wrap"). CSS ("display") = = "None") { 
      $ ("# Slider_wrap "). Show (); 
      $ ("#custom"). CSS ("background-position", "right-18px"); 
    else{ 
      $ ("#slider_wrap"). Hide (); 
      $ ("#custom"). CSS ("background-position", "right 8px");}); 
 

Some students may think why not directly with the toggle method to replace Click, I tried, the line, but the back of the next we want to click "OK" in the layer, hide the drop-down layer. If you use the toggle method, you will need to point two to eject the drop layer after you click the OK button, so I chose the click Method plus the judgment to solve the problem.
Then invoke the slider plug-in:

$ ("#range"). Slider ({ 
  min:0, 
  max:10000, 
  step:500, 
  values: [0, 3000], 
  slide:function ( event, UI) { 
    $ ("#start"). Val (Ui.values[0]); 
    $ ("#end"). Val (ui.values[1]); 
  } 
); 

We set the maximum size of the slider max to 10000, min to 0, and the slider to slide each time step is 500, the default initial range values are 0 to 3000. When you slide the slider, assign to #start and #end two text boxes. For more parameter settings and method calls, see the jquery UI official website:
Finally, when we select a good price range, click the "OK" button, will close the slider selection box, change the "Custom" status, the code is as follows:

$ ("#btn_ok"). Click (function () { 
  $ ("#slider_wrap"). Hide (); 
  $ ("#custom"). CSS ("background-position", "right 8px"); 
  var start = $ ("#start"). Val (); 
  var end = $ ("#end"). Val (); 
  $ ("#show"). HTML (start+ "-" +end); 
}); 

In this way, we can see the effect we want, go ahead and try it.

The above mentioned is the entire content of this article, I hope you can enjoy.