阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Ion.RangeSlider 中文API文档

      插件 jQuery.Ion.RangeSlider 中文API文档 https://github.com/IonDen/ion.rangeSlider ion.rangeSlider

      Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options.


      Description

      • Ion.RangeSlider — cool, comfortable, responsive and easily customizable range slider
      • Supports events and public methods, has flexible settings, can be completely altered with CSS
      • Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
      • Ion.RangeSlider supports touch-devices (iPhone, iPad, Nexus, etc.).
      • Ion.RangeSlider freely distributed under terms of MIT licence.
      • With this plugin you will be able to build beautiful range sliders, like this:

      ion.rangeSlider

      Key features

      • Skin support. (6 skins included)
      • Any number of sliders at one page without conflicts and big performance problems
      • Two slider types single (1 slider) and double (2 sliders)
      • Support of negative and fractional values
      • Ability to set custom step and snap grid to step
      • Support of custom values diapason
      • Customisable grid of values
      • Ability to disable UI elements (min and max, current value, grid)
      • Postfixes and prefixes for your numbers ($20, 20 € etc.)
      • Additional postfix for maximum value (eg. $0 — $100+)
      • Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
      • Slider writes its value right into input value field. This makes it easy to use in any html form
      • Any slider value can be set through input data-attribute (eg. data-min=“10”)
      • Slider supports disable param. You can set it true to make slider inactive
      • Slider supports external methods (update, reset and remove) to control it after creation
      • For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
      • Slider supports date and time

      Demos

      Dependencies

      Usage

      Add the following libraries to the page:

      • jQuery
      • ion.rangeSlider.min.js

      Add the following stylesheets to the page:

      • ion.rangeSlider.min.css

      CDN

      Use CDNjs or JSdelivr to get latest version of plugin and jQuery.

      <!--Plugin CSS file with desired skin-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
      
      <!--jQuery-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      
      <!--Plugin JavaScript file-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>   
      

      Install with NPM

      Use NPM to download latest version of a plugin and install it directly in to your project.

      • npm install ion-rangeslider

      Install with Bower

      Use Bower to download latest version of a plugin and install it directly in to your project.

      • bower install ion-rangeslider

      Install with Yarn

      Use Yarn to download latest version of a plugin and install it directly in to your project.

      • yarn add ion-rangeslider

      Initialisation

      The slider overrides a native text input element.

      <input type="text" id="example_id" name="example_name" value="" />
      

      To initialise the slider, call ionRangeSlider on the element:

      $("#example_id").ionRangeSlider();
      

      Experiments playground

      Here you can find bunch of advanced JSFIDDLE demos with different, non-standard use cases:

      Settings

      OptionData-AttrDefaultsTypeDescription
      skindata-skinflatstringChoose UI skin to use (flat, big, modern, round, sharp, square)
      typedata-typesinglestringChoose slider type, could be single - for one handle, or double for two handles
      mindata-min10numberSet slider minimum value
      maxdata-max100numberSet slider maximum value
      fromdata-fromminnumberSet start position for left handle (or for single handle)
      todata-tomaxnumberSet start position for right handle
      stepdata-step1numberSet sliders step. Always > 0. Could be fractional
      min_intervaldata-min-interval-numberSet minimum diapason between sliders. Only for double type
      max_intervaldata-max-interval-numberSet minimum maximum between sliders. Only for double type
      drag_intervaldata-drag-intervalfalsebooleanAllow user to drag whole range. Only for double type
      valuesdata-values[]arraySet up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, can no longer be changed
      from_fixeddata-from-fixedfalsebooleanFix position of left (or single) handle
      from_mindata-from-minminnumberSet minimum limit for left (or single) handle
      from_maxdata-from-maxmaxnumberSet maximum limit for left (or single) handle
      from_shadowdata-from-shadowfalsebooleanHighlight the limits for left handle
      to_fixeddata-to-fixedfalsebooleanFix position of right handle
      to_mindata-to-minminnumberSet minimum limit for right handle
      to_maxdata-to-maxmaxnumberSet maximum limit for right handle
      to_shadowdata-to-shadowfalsebooleanHighlight the right handle
      prettify_enableddata-prettify-enabledtruebooleanImprove readability of long numbers: 10000000 → 10 000 000
      prettify_separatordata-prettify-separatorstringSet up your own separator for long numbers: 10000000 → 10,000,000 etc.
      prettify-nullfunctionSet up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates
      force_edgesdata-force-edgesfalsebooleanSliders handles and tooltips will be always inside it’s container
      keyboarddata-keyboardtruebooleanActivates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
      griddata-gridtruebooleanEnables grid of values above the slider
      grid_margindata-grid-margintruebooleanSet left and right grid gaps
      grid_numdata-grid-num4numberNumber of grid units
      grid_snapdata-grid-snapfalsebooleanSnap grid to sliders step (step param). If activated, grid_num will not be used. Max steps = 50
      hide_min_maxdata-hide-min-maxfalsebooleanHides min and max labels
      hide_from_todata-hide-from-tofalsebooleanHides from and to labels
      prefixdata-prefix`` | string | Set prefix for values. Will be set up right before the number: **$**100 |
      postfixdata-postfix`` | string | Set postfix for values. Will be set up right after the number: 100k |
      max_postfixdata-max-postfix`` | string | Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+ |
      decorate_bothdata-decorate-bothtruebooleanUsed for double type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k
      values_separatordata-decorate-both-stringSet your own separator for close values. Used for double type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.
      input_values_separatordata-input-values-separator;stringSeparator for double values in input value property. <input value="25;42">
      disabledata-disablefalsebooleanLocks slider and makes it inactive. Input is disabled too. Invisible to forms
      blockdata-blokcfalsebooleanLocks slider and makes it inactive. Input is NOT disabled. Can be send with forms
      extra_classesdata-extra-classesstringTraverse extra CSS-classes to sliders container
      scope-nullobjectScope for callbacks. Pass any object
      onStart-nullfunctionCallback. Is called on slider start. Gets all slider data as a 1st attribute
      onChange-nullfunctionCallback. IS called on each values change. Gets all slider data as a 1st attribute
      onFinish-nullfunctionCallback. Is called when user releases handle. Gets all slider data as a 1st attribute
      onUpdate-nullfunctionCallback. Is called when slider is modified by external methods update or reset

      Description of data passed to callbacks (onChange and etc.)

      Result is object type and passed to callback as first argument:

      Obj: {
          "input": object,            // jQuery-link to input
          "slider": object,           // jQuery-link to sliders container
          "min": 1000,                // MIN value
          "max": 100000,              // MAX values
          "from": 10000,              // FROM value
          "from_percent": 10,         // FROM value in percents
          "from_value": 0,            // FROM index in values array (if used)
          "to": 90000,                // TO value
          "to_percent": 90,           // TO value in percents
          "to_value": 0,              // TO index in values array (if used)
          "min_pretty": "1 000",      // MIN prettified (if used)
          "max_pretty": "100 000",    // MAX prettified (if used)
          "from_pretty": "10 000",    // FROM prettified (if used)
          "to_pretty": "90 000"       // TO prettified (if used)
      }
      

      Creating slider (all params)

      An example of a customised slider:

      $("#example").ionRangeSlider({
          skin: "big",
          min: 0,
          max: 10000,
          from: 1000,
          to: 9000,
          type: 'double',
          prefix: "$",
          grid: true,
          grid_num: 10
      });
      

      You can also initialise slider with data-* attributes of input tag:

      data-min="0"
      data-max="10000"
      data-from="1000"
      data-to="9000"
      data-type="double"
      data-prefix="$"
      data-grid="true"
      data-grid-num="10"
      

      Public methods

      To use public methods, at first you must save slider instance to variable:

      // Launch plugin
      $("#range").ionRangeSlider({
          type: "double",
          min: 0,
          max: 1000,
          from: 200,
          to: 500,
          grid: true
      });
      
      // Saving it's instance to var
      var slider = $("#range").data("ionRangeSlider");
      
      // Fire public method
      slider.reset();
      

      There are 3 public methods:

      // UPDATE - updates slider to any new values
      slider.update({
          from: 300,
          to: 400
      });
      
      // RESET - reset slider to it's first values
      slider.reset();
      
      // DESTROY - destroys slider and restores original input field
      slider.destroy();
      

      One more look on demos

      All plugins options are covered in demos.

      Update history


      Support Ion-series plugins development:

      目录
      目录