Jquery how to create a slider ? Input field

How to create a slider for a input field with Jquery?

Like there is on this page: http://www.whoishostingthis.co开发者_Go百科m/compare/ With the price and diskspace

---

You can use jQuery UI take a look at: http://jqueryui.com/demos/slider/#steps

---

As Kestutis said, you could use jQuery UI Slider. It provides a slide event, which is called as the slider is slid. In the function, you can access the handle element with ui.handle. You could put in whatever text on the handle at each increment.

For example, the following snippet will display the slider value as it is slid, and display the text "unlimited" when it reaches the maximum value.

$("#slider").slider({
    slide: function(event, ui) {
        if (ui.value == $(this).slider('option', 'max'))
            $(ui.handle).html('unlimited');
        else
            $(ui.handle).html(ui.value);
    }
});

You would also need to modify the css style for the handle a little bit:

.ui-slider .ui-slider-handle
{
    width: auto;
    padding: 0.2em;
    text-decoration:none;
}

See it in action: http://jsfiddle.net/william/TbAQd/.

---

Update

You can use the .slider('value', [value]) function to set the value of the slider. You may also want to handle the change event, so when the value changes, the handle would be updated as well.

See this in action: http://jsfiddle.net/william/TbAQd/1/.

---

Update 2

http://jsfiddle.net/william/TbAQd/3/