Fork me on GitHub
Post Format

Free Multi-Node Range and Data Slider: JQ Slider

Before I present today’s freebie, I would like to take you in the background of this post.

First of all, what is your greatest development challenge as developer of software application? Nah, I am not talking about those pressing deadlines or frequently changing business requirements. I am asking about things that make you scratch your head all through your development lifecycle. For me, it is making my products simple and usable especially business applications. It is like ‘crafting simplicity’ out of a complex business domain.

When designing applications for serious business users, you need to think beyond ‘kool’ interfaces and ‘super-efficient’ code under the hood. You need to convert business processes into simple use cases. Fortunately, there are 101 ways to do it. You do not have to be a UI designer. All you need is using the right set of screen objects in a logical flow on the interface. There are various useful screen controls are available out there. I usually use them for myself or create my own. Today, I am sharing one of those, JQ Slider.

Free Multi-Node range and data slider:jQSlider

JQ Slider is a multi-node range and data slider that allows to provide easy-to-use user data selection and filter tool. It can be used in many ways. Let me explain how:

  • JQ Slider can be used to select data values on a slider. For example, selection of value in a given range of 1 to 10.
  • You can use JQ Slider when you want to allow user to rate products etc. For instance, selection of rating from ‘Poor’ to ‘Best’.
  • You can also use JQ Slider to provide selection of a date range within a specific timeline. For instance, year selection (from 1995 to 2010)
  • You can use JQ Slider to filter values in a grid. For example, when you have a list of products in a grid and you want to filter data by price (like filtering products with price tag between $10 and $50).

JQ Slider is completely customizable including style and formatting, and selection units. Powered by JQuery and JavaScript, it is based on standard JavaScript and CSS that you can customize as per your requirements.

Customizing jQSlider

Customizing jQslider is very easy you only need to create four css classes with the name of your theme, following is the css code for default theme, just copy these classes, replace the name “default” with your new theme name and write your own code for these classes.

.slider.default
{
    background-color: #D2DBEC;
    border: 1px solid #299BC9;
    -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;
    width: 200px;
    height: 4px;
    background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);
}
.inner.default
{
    background: #299BC9;
    -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;
}
.draghandle.default
{
    width: 8px;
    height: 20px;
    background-color: #299BC9;
}
.draghandle.default.selected
{
    background-color: #ADC7EB;
}

That’s it your theme is ready to use and you can use it like.

$('#my-slider').jqslider({theme:'YOUR THEME NAME HERE'});
jQSlider Themes
  • default
  • simple
  • blue
  • steel
  • green
  • dark-green
  • orange
  • red
jQSlider Parameters
  • theme: css class for theme,  default theme is  ‘default’
  • minValue: Minimum value of slider, default is 0
  • maxValue: Maximum value of slider, default is 10
  • selStart: default value of left node if range selection is true, default is 0
  • selEnd:  default value of right node if range selection is true, default is 10
  • smallChange: inc/dec value for each change in slider position, default is 1
  • animate: if true the nodes will move with animation effect when slider bar is clicked, default is true
  • animationSpeed: duration for animation, default is 500
  • ticks: if true tick marks will be displayed for each step value, default is true
  • labels: if true min/max value labels will be displayed, default is true
  • rangeSelection: if true two nodes will be create, otherwise only single node, default is true
  • dragTitle: default ‘Drag’
  • callback: function to be called on each value change, default is null
Using jQSlider

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to jqslider.js file
  • Add a reference to jqslider.css file

Add a block element (div) with in the body of HTML document, assign some id and call jQSlider initializer function.

<div id="jqslider"></div>
<script type="text/javascript">
        $(document).ready(function() {
            $('#jqslider').jqslider({ theme:'steel' });
        });
</script>

Great plugin that most people who tried a dedicated server hosting for their own web pages also used it and it really made their sites look professional.

No related posts.

33 comments

  1. Pingback: Doublemesh » 12 Useful jQuery Tutorials for Web Developers

  2. Pingback: Ko Bear – 10 个最新的jQuery开发指南

  3. Pingback: 最新酷炫的jQuery开发指南分享 | 微考教程网

  4. Pingback: 10 Latest jQuery Tutorials for Web Developers | Wordpress Themes

  5. Pingback: 10 个最新的jQuery开发指南 | IT News - 发布最新IT信息

  6. Pingback: 10 Latest jQuery Tutorials for Web Developers | ZoomZum

  7. Pingback: 51 Best Useful jQuery Plugins Download And TutorialsBest Smashing | Best Smashing

  8. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | Pro Design World - Web Design Blog

  9. Pingback: 40个新鲜出炉的 jQuery 插件和免费教程【上篇】 | 编程·早晨

  10. Pingback: 40个新鲜出炉的 jQuery 插件和免费教程 | 异度小站

  11. Pingback: 9 Randomly Good jQuery Plugins | jQuery4u

  12. Pingback: 40个免费新鲜的jQuery插件和教程 | 成雷

  13. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | pixelpush design

  14. Pingback: Best Of 2011: Best Useful jQuery Plugins And Tutorials Don't Forget to participate in a contest where you can win the world's biggest user interface elements pack "Futurico UI Pro" for your design projectsi | creativectors.com

  15. Pingback: Free Multi-Node Range and Data Slider: JQ Slider | TEKNQ

  16. Pingback: Be a Professional Developer Using Ultimate jQuery Plugins | Smashing Buzz

  17. Pingback: 40款非常有用的 jQuery 插件推荐(一) | 前端爱好者-崔超

  18. Pingback: Alternativas de Slider para jQuery | WebLatam

  19. Pingback: 51 Best Useful jQuery Plugins Download And Tutorials | Oktilyon Teknoliyon

  20. Pingback: [jQ]JQ Slider | 男丁格爾's 脫殼玩

  21. Pingback: Backlink Center » Best Of 2011: Best Useful jQuery Plugins And Tutorials

  22. Pingback: Best Of 2011: Best Useful jQuery Plugins And Tutorials Don't Forget to participate in a contest where you can win the world's biggest user interface elements pack "Futurico UI Pro" for your design projectsi | craetivectors.com

  23. Pingback: [Pic]2011年最佳实用的jQuery插件和教程 « 朝九✓晚五

  24. Pingback: 2011年最佳实用的jQuery插件和教程 | Jackchen Design 1984

  25. Pingback: Inspiration Best Of 2011: Best Useful jQuery Plugins And Tutorials

  26. Pingback: Excellent and Useful jQuery Plugins | Ahmad Assaf`s Blog

  27. Pingback: Best Useful jQuery Plugins And Tutorials | GraphicShared | Download Graphic Tools

  28. Pingback: Excellent and Useful jQuery Plugins « DopinPanda-Blog

  29. Pingback: Web Design 40款非常有用的 jQuery 插件推荐(系列一)

  30. Pingback: 40+ Useful and Fresh jQuery Plugins | HeroicTuts.com

  31. Pingback: 40+ Kullanışlı ve Taze Jquery Uygulamaları | internet, tasarım, teknoloji ve kültür

  32. Pingback: Sacima鲨鳍马工作室 » Blog Archive » 40+ Useful and Fresh jQuery Plugins

  33. Hi there,

    I am interested in using multiple sliders together, allowing users to also weight how important each slider is to them (moving a heavily weighted slider would have more effect on the data displayed than a low weight) to sort data displayed as in your demo. Can that happen here?

    I’m also happy to pay a developer who would be willing to make this happen for me.

    – Dan

    Reply

Leave a Reply

Required fields are marked *.


four × 5 =