jQuery Slider plugin (Safari style)

Posted on November 20, 2009 by Egor Khmelev

jQuery Slider is easy to use and multifunctional jQuery plugin. Below you can find demos and documentation.

If you have any suggestions, comments or just found a bug – please do not hesitate to write.

Slider
in string

{
  from: 5,
  to: 50,
  step: 2.5,
  round: 1,
  dimension: '&nbsp;€'
}

{
  from: 5000,
  to: 150000,
  heterogeneity: ['50/50000'],
  step: 1000,
  dimension: '&nbsp;$'
}

{
  from: 0,
  to: 500,
  heterogeneity: ['50/100', '75/250'],
  scale: [0, '|', 50, '|' , '100', '|', 250, '|', 500],
  limits: false,
  step: 1,
  dimension: '&nbsp;m<small>2</small>'
}

{
  from: 1,
  to: 30,
  heterogeneity: ['50/5', '75/15'],
  scale: [1, '|', 3, '|', '5', '|', 15, '|', 30],
  limits: false,
  step: 1,
  dimension: '',
  skin: "blue"
}

{
  from: 480,
  to: 1020,
  step: 15,
  dimension: '',
  scale: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
  limits: false,
  calculate: function( value ){
    var hours = Math.floor( value / 60 );
    var mins = ( value - hours*60 );
    return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins );
  }
}

Documentation

from — [number] left limit
to — [number] right limit
step — [number] step of pointer
round — [number] how many numbers after comma
heterogeneity — [array] (percentage of place)/(value of place)
dimension — [string] show this after number
limits — [boolean] show or not limits
scale — [array] labels under slider, ‘|’ — show just line
skin — [string] if you define new skin, just write here his name, in sources defined blue skin for example
calculate — [function(value)] function to calculate final numbers, for example time.
onstatechange — [function(value)] function fires while slider change state.
callback — [function(value)] function fires on “mouseup” event.
new features

Do not forget to set absolute or true relative path for png in jslider.ie6.css and jslider.ie6.[skin].css

146 thoughts on “jQuery Slider plugin (Safari style)”

Vladimir on November 22, 2009 at 11:43 pm said:

Хороший плагин. Но сильно не хватает возможности смены позиции бегунка при клике на шкале. Сможете реализовать?
Eugene on November 22, 2009 at 11:46 pm said:

Hello,

It is a very good jQuery slider plugin, thank you very much!

The only one feature I missed is a possibility to change slider position by clicking on scale.. Hope this will be available in next versions.

Wishes,
Eugene
Egor Khmelev on November 23, 2009 at 12:24 am said:

Thank you for your reply Vladimir and Eugene, I’m going to do it soon.
Pingback: 5 Fresh and Useful jQuery Plugins Were Born in November 2009 | AEXT.NET
Mike Taylor on November 23, 2009 at 11:36 pm said:

This is really cool. The only thing I’d suggest is that you consider using type=range, rather than your non-standard type=slider. That way–you’d have a cross-browser html5 range input.

Excellent work.
Egor Khmelev on November 24, 2009 at 1:09 am said:

@Mike Taylor That is good idea
Pingback: jQuery Slider plugin (Safari style) « Design it. Develop it. Use it. « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
nekretnine on November 24, 2009 at 3:17 pm said:

Great effect. I will use it on my real estate portla, thanks!!!
Pingback: jQuery Slider plugin (Safari style) « Design it. Develop it. Use it. : Popular Links : eConsultant
Pingback: Easy to Use Safari Style jQuery Slider Plugin | Programming Blog
Pingback: Online Business Management Software and Services » Blog Archive » Easy to Use Safari Style jQuery Slider Plugin
Pingback: jQuery Slider plugin (Safari style)
Avanzaweb on November 25, 2009 at 6:47 pm said:

It is very useful and usable on real estate websites
Pingback: Twitted by gominthink
Pingback: AMB Album » Easy to Use Safari Style jQuery Slider Plugin
ollyk on November 25, 2009 at 11:37 pm said:

Feels very robust, click and leave impartial from cursor position and no trouble to drag the different thumbs. I like the merge of the tooltip and the hiding of the labels very much, too.

Good work, keep it on.
Austin Ginder on November 26, 2009 at 4:54 am said:

An idea, maybe its already possible, can you handle time selections with this? Example showing a user 8:00 AM to 5:00 PM and allowing them to select start/end times for a particular event.
Pingback: Slider Plugin (Safari Style)
Pingback: Twitted by damonky
John Dichtl on November 26, 2009 at 3:27 pm said:

thank you very much for this jQuery Slider plugin. It’s a very precious plug in even without changing the slider position just by clicking on scale…great job!
Pingback: jQuery Slider plugin : Glissieres du style Safari | Anis Berejeb
chris on November 28, 2009 at 7:49 am said:

Really nice plugin, good job!
Jatin on November 29, 2009 at 2:51 am said:

i need a slider for 1day, 1week and 30 days.
can i achieve it using this plugin? please advise.
Pingback: Web 2.0 Инструмент Safari Style jQuery Слайдер Плъгин | Web 2.0 Blog
Pingback: Easy to Use Safari Style jQuery Slider Plugin | LightBlogs
gf on November 30, 2009 at 6:44 am said:

please add callback function…
Mauzzam on November 30, 2009 at 8:51 am said:

How to fetch the value of pointer in a hidden field when pointer is moved?
Egor Khmelev on November 30, 2009 at 10:44 am said:

@Jatin I think you can use it, I don’t see any problems with that

@gf @Mauzzam I’ve updated slider, now there two new functions, callback and onstatechange. Thank you for your replies.
Jatin on November 30, 2009 at 4:50 pm said:

Egor,

i am able to get 1 to 30 days now. How to get selected value? how to use onstatechange event?
Egor Khmelev on November 30, 2009 at 5:03 pm said:

@Jatin .slider{ …, onstatechange: function( value ){ /*actions*/ }, … }
if you just want to get final state — better to use callback event, it is the same usage like onstatechange
Jatin on November 30, 2009 at 10:30 pm said:

like this?

jQuery(“#SliderSingle”).slider({
from: 1,
to: 30,
step: 1,
round: 1,
scale: [1, '|', 8, '|', '15', '|', 23, '|', 30],
limits: false,
dimension: ‘ day’,
skin: “blue”,
onstatechange: function(value) {
alert(value)
}
});
Egor Khmelev on December 1, 2009 at 1:23 am said:

@Jatin yes, however, I think you don’t need round param here… because with your “round: 1″ you will see like “23,0 day”, this value set how much symbols after comma, default round is zero.
gf on December 1, 2009 at 11:49 am said:

in firefox3.5.5
bug?
When adjusted to the maximum value, the value cannot be changed.
Pingback: Safari style jQuery Slider | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP
Egor Khmelev on December 1, 2009 at 3:40 pm said:

@gf send me example with that bug on my email. I see all right there…
gf on December 1, 2009 at 7:16 pm said:

@Egor

I sent you mail. pleaze see it,
Jacob on December 2, 2009 at 7:52 am said:

Aha, after a while of scratching my head, I figured out what “heterogeneity” is:

The heterogeneity value defines a series of points along the slider and the output value of the slider at those points, allowing you to tinker with how the output of the slider changes as you move the knob. The “percentage” is how far along the slider the point is — the X value. The “value of place” is the Y value at that X. Between the points, the output is linear with the input, but if you add enough points, you can make the output approximate a curve.

I wrote this “calculate” function before I figured heterogeneity out. It’s a little smoother if you’re just trying to do a graduated scale, but it’s hard-coded for 0-3000 with a 5-point step, and it requires more computation in the user’s browser:

calculate: function(value)
{
// This is a little bit “artistic.” Using an exponential to make the low
// end move more slowly and the high end move more quickly, so it’s
// easy to select $5, $10, $15, $25, but the scale can still go up to
// $3000. The *600 followed by ceil() followed by the *5 provides
// rounding to the nearest $5.
// Caveats: We boost value to speed up low end (and the same boost
// overall to prevent values beyond 100%)
var lowendbooster = 600;
return Math.ceil(
Math.pow( ( value + ( value == 0 ? 0 : lowendbooster ) )
/ ( 3000 + lowendbooster ),
5 )
* 600
) * 5;
}
Pingback: Easy to Use Safari Style jQuery Slider Plugin | trackteq.com
e-smile on December 5, 2009 at 12:57 am said:

Great plugin. I’ll use it on my monthly reports
Keep going

Thank you.
JT on December 17, 2009 at 5:10 pm said:

Is it possible to split the two range values in to seperate boxes when js is disabled?
Not a huge problem but would be easier for people to understand how to input values if they have js disabled.
Egor Khmelev on December 17, 2009 at 6:01 pm said:

@JS sure, you can use noscript tag in html in this case. I don’t see any problems with that.
Jhon Doe on December 18, 2009 at 12:58 am said:

God job!!
That is good idea
Siju on December 18, 2009 at 7:38 pm said:

Hi,
How can I set initial positions for the two pointers?
Egor Khmelev on December 18, 2009 at 7:54 pm said:

@ Siju As you can see in sources — you should write you initial states in input’s value attribute, for example <input … value=”10″ … /> (one pointer slider) or <input … value=”10;20″ … /> (two pointers slider)
Siju on December 18, 2009 at 7:59 pm said:

Thanks Egor Khmelev, for your quick response.
regards
Siju
Guillaume on December 19, 2009 at 12:13 am said:

Hi,

Very good piece of code. But is there a way to dynamically (i.e. by ajax call) change value of settings ?
I would like to be able to change the “to” value, depending on some other element.
I tried to redeclare my jQuery(‘#myelement).slider({to: newvalue});
but it draws another slider… any help ?
Bethrezen on December 19, 2009 at 12:42 pm said:

Man, that’s awesome. I liked it very much. …. But I can’t find a use for it
Maybe it’ll be included into my CMS called DotPlant.
Egor Khmelev on December 19, 2009 at 4:21 pm said:

@Guillaume Sorry, but there are no way now to do it, but I will try to add this as soon as possible. So keep looking for updates here.

@Bethrezen It would be great
Pingback: bulldoggie studio » Easy to Use Safari Style jQuery Slider Plugin
Pingback: JQuery Plugins Diciembre 2009 | José Pinilla
JuanPablo on December 28, 2009 at 8:08 pm said:

Great plugin!!! Just one little question, is there anyway possible to change the offset of the cursor values? I would like them to be right over the bar, and not over the cursor…. any ideas?
kikos on December 31, 2009 at 5:09 pm said:

how could i make it static ? i need it to unable the possibility to change the slider position in some of cases, any ideas ? thx !
Egor Khmelev on December 31, 2009 at 5:26 pm said:

@JuanPablo Its possible to cahnge by jslider.css, string 21, margin-left value have to be 0. but its a bit strange result

@kikos the faster way I see its put some semi-transparent or full transparent block right over slider. there are no another ways now.
dom on December 31, 2009 at 5:32 pm said:

Hi Egor

Thanks for this great work!
I’m trying to get (“#Slider1″).val() to calculate things live on the page but it returns an empty string when the pages load, whereas once the slider has been clicked, it returns the correct value from the hidden tag…

(I use jquery 1.2.6, the framework uses it, I cannot use 1.3.2 for now, don’t know if this can be the problem)
jeff on January 3, 2010 at 4:17 am said:

i second Guillaume’s request.
i will use a work around until then.

Brilliant plugin by the way. I will be using it in my next project.

thank you for your contribution.
jeff on January 3, 2010 at 8:56 am said:

This worked for me when wanting to change options dynamically.

first remove it.
$(“span.jslider”).remove();

Then re-Load it.
$(“#Slider1″).slider(options);

This will fulfill Guillaume’s request until something better comes along.
jeff on January 4, 2010 at 8:08 am said:

I’m busting my head to figure out how to get the callback to identify which slider on the page fired it without having to create a different callback for every slider.

Usually you get a reference to the object that fired the event.
example: this.id
But I’m not seeing any such reference here.

Am I wrong?
Egor Khmelev on January 4, 2010 at 10:44 am said:

@jeff You could simply inspect slider object by firebug in your callback function: console.dir( this ); to find that this.inputNode — reference to jquery object of you input and catch id like this.inputNode.attr(‘id’);
jeff on January 5, 2010 at 12:45 am said:

@egor
I actually found this on my own by pouring through the source code.
But I wish I had seen this earlier as I spent a couple hours trying to figure this out.

Right now, this does everything I need it to do. The customer is very pleased.
I am thrilled.

Thanks much for your contribution. You have an excellent plugin here.
Ken on January 13, 2010 at 11:31 am said:

Hi.

First I’d like to say that this slider-function is superb.

But still theres is a function I miss:
$(#SingelSlider).slider(‘MoveTo’, 30);

Is there a function to update the slider outside the slider?
By that I mean; is there a function to call to update the slider and move the knob?

Thanks, K
Egor Khmelev on January 13, 2010 at 5:22 pm said:

@Ken Sorry, there are no way now. But it is very interesting idea to interact with slider. I’ll send you an email when update it.
Leloup on January 28, 2010 at 12:32 am said:

Really nice look and purpose, i’m going to use it, for sure.
But i’m still a beginner with jquery. Is there a way catch the initial value, just after initialization, before the user interact with the plug-in ?

The purpose is to get an ajax builded slider and being able to figure it’s value out even if the user submits it without interacting.
Perhaps an afterinit : function () {} ?
Leloup on January 28, 2010 at 1:16 am said:

Just noticed a little bug : Increase the right cursor’s value up to its maximum and release it. Then, incrase the right cursor to the same value of the other (both on maximum) and release it too…
Now, try to change the value of any, you can’t anymore.

I see two work around :
- change the z-order, puting above the cursor which is on the wrong side (i mean the left above when it’s on the right side)
- A more pleasant beavour would be that, when one cursor reach the other one, it pushes the other further and, when they reach a side, they can’t take the same value.
digitalnature on February 4, 2010 at 11:04 pm said:

amazing plugin
I’m using it on a WordPress theme I’m working on, within theme settings (to visually change page column sizes).

there’s just a small glitch that makes the scale inaccurate with certain scale values, like a 960 grid system in my case.

the fix is to replace var prc = Math.round((((100/(s.length-1)))*10)/10);
with var prc = (((100/(s.length-1)))*10)/10;
and on the line below, (i*prc) with Math.round(i*prc)

thanks!
periklis on February 20, 2010 at 4:43 pm said:

Nice plugin. Any consideration to allow for both horizontal and vertical placement.

cheers
Pingback: 25 Amazing and Fresh jQuery Plugins - Speckyboy Design Magazine
Pingback: 25 Amazing and Fresh jQuery Plugins · rogdykker
Vladimir on March 1, 2010 at 7:07 pm said:

I eaw one very impressive jQuery slider with many JS’s in it that I can’t and don’t now how to brake it. It is very, but very important for me to make one – JUST ONE -like that. Is there anyone nice, polite and knowledgeable to help me with it. i can even pay few bucks mfor help. But seriously people – very pretty and I really need it. Thanks
Pingback: 25 Amazing and Fresh jQuery Plugins | Son Of Byte - Web Design & Development
Pingback: 25 Amazing and Fresh jQuery Plugins - Programming Blog
Pingback: 25 jQuery Slider Plugins | Toronto Web Design Firm | Spacevibes Blog
Mohsin Ch. on March 5, 2010 at 1:50 pm said:

Minor Bug!!!!

I have really much impressed from this slider its really fantastic.
But there is a minor bug in it.

“When we set the both slider on the extreme right side its difficult to take them back.”

thanks 4 accepting my request
DavidC on March 10, 2010 at 12:20 am said:

Could anyone help me with my problem? I have three sliders which are interrelated. When I adjust one slider higher, the other two sliders should adjust downward. I understand how to make the calculation using onstatechange, but how do I reference an existing slider and update the position of the pointer?
Pingback: B3Graphics » Blog Archive » 25 Incredible jQuery Slider Tutorials and Plugins25 Incredible jQuery Slider Tutorials and Plugins
Pingback: 40 Useful jQuery Techniques and Plugins - Smashing Magazine
Pingback: 40 Useful jQuery Techniques and Plugins | Web Design Cool
Pingback: 40 Useful jQuery Techniques and Plugins « all about designs
Pingback: Wordpress Blog Services - 40 Useful jQuery Techniques and Plugins
Pingback: 40个有用的jQuery插件 | Web启点
Pingback: 40 Useful jQuery Techniques and Plugins - Programming Blog
Pingback: 40 Useful jQuery Techniques and Plugins | Easybranches.com™
Pingback: 40 Useful jQuery Techniques and Plugins » Shai Perednik.com
Pingback: TG Designer » 40 Useful jQuery Techniques and Plugins
Pingback: ArticleSave :: Uncategorized :: 40 Useful jQuery Techniques and Plugins
Pingback: jQuery滑动条（滑块）插件 | Web启点
Pingback: 40 Useful jQuery Techniques and Plugins « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
Pingback: 40 Useful jQuery Techniques and Plugins | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design
Pingback: 40 Useful jQuery Techniques and Plugins by webdunyam.net
Pingback: 40 Useful jQuery Techniques and Plugins | STMGZN
Pingback: 40 Useful jQuery Techniques and Plugins « Dheerajir's Blog
Pingback: 12 More Creative & Usefull jQuery Plugins « The Creative Project
Pingback: 12 More Creative & Useful jQuery Plugins « The Creative Project
Pingback: Furkan Tunalı v4 beta // 40 Useful jQuery Techniques and Plugins /
Pingback: 40 Useful jQuery Techniques and Plugins | i know idea
Pingback: 40 Useful jQuery Techniques and Plugins via @smashingmag « webbuzz
Pingback: 40 Useful jQuery Techniques and Plugins via @smashingmag | webbuzz
Pingback: 40 Useful jQuery Techniques and Plugins
Pingback: 40 Useful jQuery Techniques and Plugins | SKZYİZ
Pingback: 40 Useful jQuery Techniques and Plugins | SKZYİZ
Pingback: 40 Useful jQuery Techniques and Plugins | Communication et marketing
Pingback: 50 Fundamental jQuery Controls and Rich UI Components - Speckyboy Design Magazine
Pingback: 50 Fundamental jQuery Controls, Components and Plugins · rogdykker
Pingback: ” 40个有用的jQuery插件 – HTML5,CSS3,WEB前端资讯站
Pingback: 50 Fundamental jQuery Controls, Components and Plugins - Programming Blog
Pingback: Feed-Syndicate » Blog Archive » 50 Fundamental jQuery Controls, Components and Plugins
Pingback: 50 Fundamental jQuery Controls, Components and Plugins | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
Pingback: 50 Fundamental jQuery Controls, Components and Plugins « lcs
Pingback: 50 Fundamental jQuery Controls and Rich UI Components - Programming Blog
Pingback: 50 Fundamental jQuery Controls, Components and Plugins | Forum on China Wholesale Lots
Pingback: jQuery Slider Plugin | 2Novatos
Pingback: 40 Useful jQuery Techniques and Plugins « R@j@. R.K
Pingback: If you want to get along, Go along. » Blog Archive » 50 Fundamental jQuery Controls, Components and Plugins
Pingback: 50 Fundamental jQuery Controls, Components and Plugins
Pingback: Fundamental jQuery Controls, Components and Plugins « Ulancer
Pingback: 50 Fundamental jQuery Controls, Components and Plugins « Son of Byte & Web Design & Development
Pingback: 40 Useful jQuery Techniques and Plugins « SaiSatheesh
Pingback: 40 Useful jQuery Techniques and Plugins | Retail Marketing Strategy
Pingback: 25 Incredible jQuery Slider Tutorials and Plugins | Web Design Blog | Resources for Web designers and Graphic Designers
Pingback: 25 Incredible jQuery Slider Tutorials and Plugins « Chilesabe
Pingback: 21个jQuery滑动门效果插件 | 我爱互联网-woiweb|专注互联网设计与开发
Pingback: 50 Fundamental jQuery Controls, Components and Plugins | Webmaster 9
Pingback: 40 Useful jQuery Techniques and Plugins | Best Web Magazine
Pingback: 40 Useful jQuery Techniques and Plugins | Geek is a Lift-Style.
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins - Noupe Design Blog
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins | Programming Blog
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins « FED视野
Pingback: Wordpress Blog Services - 50 Useful JavaScript and jQuery Techniques and Plugins
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins » Shai Perednik.com
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins » Shai Perednik.com
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins html5 css3 design depot news News Design
Pingback: JQuery 2010 useful articles html5 css3 design depot news News Design
Pingback: 21个jQuery滑动门效果插件 | 那一片蔚蓝的天空
Pingback: 彼岸(Into the wild) » Blog Archive » 50 Useful JavaScript and jQuery Techniques and Plugins
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins » abdie.web.id
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins | LionWebMedia.com
Pingback: 十年电商网_中国最大电子商务信息网 » 21个jQuery滑动门效果插件
Pingback: 50 Useful JavaScript and jQuery Techniques and Plugins | Tutorials Socialmoto
Pingback: 40 Useful jQuery Techniques and Plugins « Propaganda Digital Indonesia
Pingback: Fundamental jQuery Controls and Rich UI | cutlee.com
Pingback: Awesome jQuery Plugins And Techniques To Create Visually Excellent Websites « WORLD OF RADZAD
Pingback: OmniDownloads | Awesome jQuery Plugins And Techniques To Create Visually Excellent Websites
Pingback: 25 Incredible jQuery Slider Tutorials and Plugins « Keyurkr's Blog
Pingback: Amazing Jquery Plugin for Websites : scribbledplush
Pingback: 40种有用的jQuery技巧及插件|Narco
Pingback: UI Slider Customization - iPhone Dev SDK Forum
Pingback: Bilcyber Portal » 40 Useful jQuery Techniques and Plugins