Based on jquery, move the slider to the left and right for source code download,

Based on jquery, move the slider to the left and right for source code download,

Before entering the text, paste it to you to see if you want the effect:

Download demo source code online

The code for setting the slider Based on jQuery. This is a special effect that supports mobile phones. You can drag the slider Range selector and the slider value selector.

If you don't talk much about it, You can directly post code to everyone.

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> --> </div>

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, 25, 50, 75, 100],       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);     });   });

Articles you may be interested in:

• JQuery can drag the div to implement the Code help house correction version
• JQuery table operations (alternate display, drag table rows, select rows, etc)
• Use JQuery + EasyDrag to bring up a drag-and-drop Div. At the same time, pass the value to the Div and return the selected value of the Div.
• Jquery-based code for dragging the mouse
• Detailed examples of jquery sortable dragging method
• Implementation principle and example of jQuery drag div, move div, and pop-up layer
• JQuery plug-in slider to select the price range by dragging the slider