Quick start

Prerequisites

jQRangeSlider is highly dependant on CSS. Be sure to include one of the provided stylesheets.

Basic slider

Info: If you use more than one type of slider, please report to the multiple sliders section. 
<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>

    <h1>Hello world</h1>
    <div id="slider"></div>

    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").rangeSlider();
    //-->
    </script>
  </body>
</html>

Edit slider

Info: If you use more than one type of slider, please report to the multiple sliders section. 
<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>

    <h1>Hello world</h1>
    <div id="slider"></div>

    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQEditRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").editRangeSlider();
    //-->
    </script>
  </body>
</html>

Date slider

Info: If you use more than one type of slider, please report to the multiple sliders section. 
<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>

    <h1>Hello world</h1>
    <div id="slider"></div>

    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQDateRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").dateRangeSlider();
    //-->
    </script>
  </body>
</html>

Multiple sliders

If you are using multiple sliders on the same page, you need to use another javascript file: jQAllRangeSliders-min.js. This file contains all necessary javascript for creating all types of slider. As most part of the source code is common between different kind of sliders, it's a good practice to use this file instead of including multiple minified files.

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>

    <h1>Hello world</h1>
    <div id="slider"></div>
    <div id="dateSlider"></div>
    <div id="editSlider"></div>

    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQAllRangeSliders-min.js"></script>
    <script>
    //<!--
      $("#slider").rangeSlider();
      $("#dateSlider").dateRangeSlider();
      $("#editSlider").editRangeSlider();
    //-->
    </script>
  </body>
</html>