CODEWITHSUNDEEP
jqueryhtml
Joe Bobby
Joe Bobby

Reputation: 2811

Creating a Slider Like This?

I'm not sure what this is called so I can't search for it, but if you goto http://vps.net/product/cloud-servers/ and scroll down to VPS nodes, how is this created? and is there any tutorial or anything I can take a look at? What kind of slider is this?

Thanks!

Upvotes: 0

Views: 746

Answers (3)

Jeff B
Jeff B

Reputation: 30099

They are using a jQuery-UI slider, with a customized callback that highlights the little node boxes:

$('#slider').slider({
    range: "max",
    min: 1,
    max: 15,
    step: 1,
    slide: function(event, ui) {
        // Un-highlight nodes
        $('.node').removeClass('highlight');
        // Highlight all nodes up to value selected
        $('.node:lt('+ui.value+')').addClass("highlight");
    }
});

This is my example code, I didn't want to parse through their obfuscated code to see what they were actually doing for their callback. It is probably very similar to this.

Demo: http://jsfiddle.net/jtbowden/A8ccw/1/

You can get rid of the step behavior if you change the step value to a fractional value, like .01, and then using Math.floor() to determine your highlight index.

Demo: http://jsfiddle.net/jtbowden/A8ccw/4/

Here is a demo that updates multiple data fields:

Demo: http://jsfiddle.net/jtbowden/A8ccw/8/

Upvotes: 3

Stian
Stian

Reputation: 45

Also have a look at http://egorkhmelev.github.com/jslider/

Upvotes: 0

Ben Emmett
Ben Emmett

Reputation: 450

You can do this with the jquery ui slider: http://jqueryui.com/demos/slider/

Upvotes: 2

Related Questions