RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://ghusse.github.io/jQRangeSlider/documentation.html below:

jQRangeSlider - Documentation - Quickstart

Quick start

Prerequisites

jQuery
jQuery UI Core
jQuery UI Widget
jQuery mousewheel plugin (optional)

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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4