jQuery Slider/Trackbar: Smart Slider
Smart Slider is a jQuery plugin that mimics the very common user interface track bar, which consists of a slider bar and tracker/pointer, where tracker can be moved back and forth along the slider bar to select a value.
Smart Slider comes in three different styles with a variety of custom parameters. You can also use your custom styles simply by defining your custom CSS classes. Smart Slider supports different styles and custom themes. Using Smart Slider plugin is also very simple, you just need a block element, Smart Slider script and CSS file, Smart Slider automatically generate track bar UI.
Have a look at the demonstration below.
Smart Slider Parameters
- style: CSS class name in single/double quotes e.g. style: ‘style1’
- defaultValue: Initial position of tracker e.g. defaultPosition:0
- sliderHeight: height of slider e.g. 4
- sliderWidth: width of slider e.g. 200
- trackerHeight: height of tracker(pointer) e.g. trackerHeight:20
- trackerWidth: width of tracker(pointer) e.g. trackerWidth:20
- minValue: minimum value of slider e.g. minValue:0
- maxValue: maximum value of slider e.g. maxValue:10
- animate: if true the tracker will animate when you click a point in slider e.g. animate: true
- ticks: if true tick marks will be displayed e.g. ticks: true
- labels: if true min and max values will be displayed on left and right of slider e.g. labels: true
- callback: your custom javascript function that will be called on each value change e.g. callback:onTick
Using Smart Slider
In your HTML file add the following in head section.
- Add a reference to latest jQuery script
- Add a reference to smartslider.js file
- Add a reference to smartslider.css
Create a block element (div) within the body of your HTML file as shown below.
<div id="smart-slider"> </div>
Also, add the following code to your HTML file’s head section.
Where onTick is the callback which is called on each value change, in this way you can get the current value. I’ve used style1 in the example above. Let’s see how the CSS code looks below.
.slider.style1
{
background-color: #D7D7D7;
border: solid 1px #B6B6B6;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
.inner.style1
{
background-color: #DFECF4;
-moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
-webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
}
.lgripper.style1
{
background: url(tracker.png) 0px 0px no-repeat;
}
Whenever you want to define your style either change the existing classes or create your style for at least three elements and pass your style for style parameter in the initializer method, e.g., style:’mystyle’
Style1 and style2 are the other two styles for Smart Slider.Here is the complete code for example above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Smart Slider</title> </head>
<body>
<div id="smart-slider">
</div>
<div id="text" style="clear:both; text-align:center;width:200px;">
</div>
</body>
</html>
Note: Currently Smart Slider plugin supports horizontal slider with single tracker/pointer. Future version will have vertical slider and double tracker/pointer.
Smart Slider Review
- Overall
- Feature Availability
- Customization
- Deign Quality
- Flexibility
This is a great plugin – it doesn’t seem to be obeying the minimum value parameter. (example: minValue :30, maxValue : 4000… still goes down to zero.) Any idea?
Hi is possible to directly set the value?
Is possible to set the trackbar in a timer value?
something like
$(‘#trackbar’).currentValue(value);
I need to snap the .lgripper to the next o previous position automatically when it is between 2 value +/- 1.
is it possible?
thank you for your cool plugin.
thanks very useful
That’s very nice! Thanks guys!
Hi Muhammad Shahbaz Saleem,
I just want to say thanks, the plugin helped to me a lot, I used it like a base for make improvements such as add buttons for controll the bar and a slide for a content like a timeline.
Really thank you,
Daniel Chaur.
i want to align the track bar to center or to right how
if i use smart tool for output i want to display output without enabled user to change in slider-bar (to be enabled false)
how to pass slider value to asp.net4 label or textbox
thank you
You can achieve the desired functionality by using the callback feature and within callback function you can do something like .
function onTick(value) {
$(‘#’).val( value);
}
thank you this code is very important for me
thank you Again
Thank you very much for your marvellous smart slider. I have tried and it works very well.
I wonder if you can show me how to maks it to accept dynamically the max value and the default value and also how can i extract the return value.
Thanks
Leo
Hi Muhammad
I tried to use your slider in my MVC3 app but it didnot work. Can you pls tell me do i need reference ui-core
and js-1.8.13 (latest jquery) ?
Thank you in advance
Leo
Thanks a lot for your concern and efforts! This stuff on your website is great. Moreover I greatly value your ideas. In my position these are important details. Nevertheless thanks a lot. Good read.
Thanx
Hi just thought i would tell you something.. This is twice now i?ve landed on your blog in the last 3 weeks looking for completely unrelated things. Great Info! Keep up the good work.
Thanks 🙂
Useful to me. fggdfgh
Thanks Davis
Good work Shahbaz. It seems there is a bug in the sliders, the slider thumb doesn’t move to the exact position for double clicks. Steps to reproduce
1. Move thumb to start position
2. Double click somewhere near the end of slider-line.
3. The thumb would bounce back before reaching the point where click occurred.
4. Now click at any location on the slider, it would behave erratically.
Sohaib
Sohaib, thanks for your comments, i’ll fix as soon as i get some time.
Double click issue has been fixed
This is cool. Can we customize this to have multiple nodes on one slider?
Im working on next version that will have multiple nodes as well as horizontal slider bar.