JQuery plug-in slider enables drag slider to select the price range, jqueryslider

JQuery plug-in slider enables drag slider to select the price range, jqueryslider

On some product quote websites, you need to provide a series of price ranges for user screening. we add a custom price range beyond the scope of the screening, which provides users with an alternative method. This article uses the jQuery plug-in and CSS to select the price range by sliding the slider. Please refer to this article.

JQuery ui has a slider plug-in, which is a very handy drag slider plug-in. To implement slider dragging, You need to first load the following js between the page headers.

<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 project running efficiency, You can compress the preceding several js files into one. We need to consider this in large WEB application projects.
You can download these related js files from the jquery ui official website,
Next, we construct the main html code:

<Ul class = "price_list"> <li class = "title"> price range: </li> <a href = "#"> less than 3000 RMB </a> </li> <a href = "#"> </a> </li> <a href = "#"> 4000-5000 RMB </a> </li> <a href = "#"> 5000-6000 RMB </a> </li> <a href = "#"> 6000-7000 RMB </a> </li> <a href = "#"> 7000-8000 RMB </a> </li> <a href = "#"> 8000-9000 RMB </a> </li> <a href =" # "> 9000-10000 RMB </a> </li> <a href =" # "> more than 10000 RMB </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"/> <input type = "button" class = "btn" id = "btn_ OK" value = "Confirm" /> </p> </div> </li> </ul>

The price range is composed of a series of li. The last li is set to custom and contains the div # slider_wrap to be selected by the slider, of course, this div is hidden by default. We need to use CSS to achieve the appearance effect.

CSS

Use CSS to make the page look good:

.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} .btn{width: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 pop up the drop-down div to display the CSS of the sliding selection range, and determine the position of the display layer through absolute and relative positioning.
The CSS of the slider plug-in the display layer comes from the built-in CSS of jquery ui. I made some small 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, when you click "Custom", the slider range display layer is displayed in the drop-down list. When you click "Custom", the drop-down layer is displayed and the arrow style is changed. When you click "Custom" again, the drop-down layer is hidden.

$(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 may wonder why the toggle method is not used instead of the click method. I tried it and it works fine, but we need to click "OK" in the drop-down layer ", hide the drop-down layer. If you use the toggle method, you need to click the "OK" button twice to bring up the drop-down layer. Therefore, I chose the click method and add judgment to solve this problem.
Call 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 value of the slider to 10000, the minimum value of min to 0, and the sliding distance of the slider to step to 500. The default initial range of values is 0 to 3000. When sliding the slider, assign the value to the # start and # end text boxes. For more parameter settings and method calls, see the official jquery ui Website:
Finally, after selecting the price range, click "OK" to close the slider selection box and 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. Please try it now.

The above is all the content of this article. I hope you will like it.