Is there a plugin or example of a jquery slider working with non-equably divisible values

0 votes

I have found two excellent jquery plugins for generating a slider for a web form, which degrade nicely in browsers that do not support javascript have styles turned off etc.

The first is the Jquery.UI version : http://ui.jquery.com/demos/slider/#steps

The second is a select element to slider : http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

However I need to create a slider that doesn't just divide the slider up in equal parts.

For example let's say I have the following range of numbers:

800,1000,1100,1200,1300,1400,1500

I'd like the slider to have a nice big gap between 800 and 1000 then smaller gaps between 1100-1500

So the slider would look a little like this:

800----1000--1100--1200--1300--1400--1500

Preferably I'd like it to degrade to a drop down, so the question is does anyone know of a plugin that supports this or has any recommendations for the best way of achieving this, customise the filamentgroup plugin roll my own etc.

Update: Been hacking about with filament group's slider and it implements the handles via JQuery UI's slider anyway. So it looks like modding JQuery.UI its self is the only option available. Will dig about in the code to see if I can find the requisite bit that needs changing. If in the meantime anyone has any ideas!!!

Aug 2 in Web Development by gaurav
• 17,580 points
9 views

1 answer to this question.

0 votes

You could do it using jquery's slider by hooking into the slide event (effectively overriding it)... Something like this:

$(function() {
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100];
    var slider = $("#slider").slider({
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
            return false;
        }
    });
    function findNearest(includeLeft, includeRight, value) {
        var nearest = null;
        var diff = null;
        for (var i = 0; i < values.length; i++) {
            if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
                var newDiff = Math.abs(value - values[i]);
                if (diff == null || newDiff < diff) {
                    nearest = values[i];
                    diff = newDiff;
                }
            }
        }
        return nearest;
    }
});

Should work for what you describe... I've tested it for dragging with the mouse & using left/right/home/end keys (obviously you'd need to change the left/right to up/down if you want a vertical slider).

Some notes:

  • Obviously the values array is whatever steps you want for your purposes.
  • Also obviously, the above code assumes a div with an id of "slider" to work.
  • It will probably work strangely if your min/max values are not the same as your min/max values for the slider (I would suggest just using "min: values[0], max: values[values.length - 1]" as your min/max options on the slider & then you should always be safe).
  • Obviously this option won't currently degrade to a drop down list, but it would be very easy to do... simply render your choices as a normal drop down list (the default state incase of no javascript) & then use jquery to hide the drop down list and also create your values array based on the options. Then you could just update the (hidden) drop down list at the same time as you update the slider in the code above, so that when your form posts, the correct value will be selected in the drop down list.

Hope that helps.

answered Aug 2 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
0 answers

how to get values of columns for a selected row through jQuery

here i am trying to fetch values ...READ MORE

Jul 1 in Web Development by gaurav
• 17,580 points
88 views
0 votes
0 answers

Finding the position of bottom of a div with jquery

I have a div and want to ...READ MORE

Jul 27 in Web Development by gaurav
• 17,580 points
11 views
0 votes
0 answers

Is there a jQuery unfocus method?

How can I unfocus a textarea or ...READ MORE

Aug 8 in Web Development by gaurav
• 17,580 points
7 views
0 votes
1 answer

Error: Failed to load resource: the server responded with a status of 404 (Not Found)

Your files are not under the JSP folder that's ...READ MORE

answered Dec 16, 2020 in Web Development by Gitika
• 65,870 points
59,708 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,861 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,853 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
1,295 views
0 votes
1 answer

Check if checkbox is checked with jQuery

To check whether a Checkbox has been ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
34 views
0 votes
1 answer

How to hide a div with jQuery?

We hide the divs by adding a CSS ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
22 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP