jQuery Range Slider With Skin Support

Ion.Range Slider is a nice, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS. It supports touch-devices which includes iPhone, iPad and etc. It has been tested on Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+). It is freely distributed under MIT licence.

Using script

Import this libraries:
[list style=”1″ underline=”1″]

  • jQuery
  • ion.rangeSlider.min.js

[/list][margin_15b]

And CSS:
[list style=”1″ underline=”1″]

  • normalize.min.css – desirable if you have not yet connected one
  • ion.rangeSlider.css
  • ion.rangeSlider.skinName.css

[/list][margin_15b]

Don’t forget about skin image:
[list style=”1″ underline=”1″]

  • sprite-skin-simple.png – Simple skin
  • sprite-skin-nice.png – Nice skin
  • Or use included PSD file and draw your own skin (don’t forget to modify skin css after that)

[/list][margin_15b]

Create base input element:

[html]

[/html]

Initialize slider:

[javascript]
$(“#someID”).ionRangeSlider();
[/javascript]

Or initialize slider with custom settings:

[javascript]
$(“#someID”).ionRangeSlider({
min: 10, // min value
max: 100, // max value
from: 30, // overwrite default FROM setting
to: 80, // overwrite default TO setting
type: “single”, // slider type
step: 10, // slider step
postfix: ” pounds”, // postfix text
hasGrid: true, // enable grid
hideText: true, // hide all text data
onChange: function(obj){ // function-callback, is called on every change
console.log(obj);
},
onFinish: function(obj){ // function-callback, is called once, after slider finished it’s work
console.log(obj);
}
})
[/javascript]

You can also initialize slider with data-* attributes of input tag:
[text]
data-from=”30″ // overwrite default FROM setting
data-to=”70″ // overwrite default TO setting
data-type=”double” // slider type
data-step=”10″ // slider step
data-postfix=” pounds” // postfix text
data-hasgrid=”true” // enable grid
data-hidetext=”true” // hide all text data
[/text]

[button style=”3″ caption=”Demo” link=”http://ionden.com/a/plugins/ion.rangeSlider/”][/button] [button style=”4″ caption=”Download Now” link=”http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-1.6.3.zip”][/button]
0 Likes
Maan
Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

Your email address will not be published. Required fields are marked *

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://www.downgraf.com/wp-content/uploads/2017/04/login-back.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 500px;}