Increment and decrease value with slider

jQuery has a plugin called "slider" that does the slider function, floating value.

To create the table itself, you can make a simple table of HTML. What the jQuery / Slider needs is a div so it can change and insert the button inside.

An example would be:

Demo: link

$(".slider-cont").each(function () {
    var este = $(this);
    var minimo = parseFloat(este.closest('tr').find('.base_width').text(), 10);
    var maximo = este.data('max');
    var degraus = este.data('step');
    este.slider({
        range: "min",
        min: minimo,
        max: maximo,
        step: degraus,
        slide: function (event, ui) {
            mostrador.text(ui.value);
        }
    });
});

In this example above I inserted important information into HTML in "date" fields. One line of this table would look like this:

    <tr class="row">
        <td><span>RAM</span></td>
        <td class="slider"><div class="slider-cont" data-step="512" data-max="4096"></div></td>
        <td class="base"><span class="base_width">512 MB</span></td>
        <td class="total"><span class="total_width"><span class="total-value">512</span> MB</span></td>
    </tr>

If you take a look at the plugin page you can find the configuration options. The ones I used were:

• range: tell the slider that it is of the "fixed minimum range" type
• min: initial value
• max: maximum value
• step: the increment value
• slide: a function that at each step of the slider updates the display

I suppose the code above is easy to understand. I leave an extra explanation for this line:

var minimo = parseFloat(este.closest('tr').find('.base_width').text(), 10);

Here I use parseFloat(numero, base); that converts strings to floating numbers. This method is practical because it removes the text as well. And the number that I use there will be searched for tr closer (up in the DOM tree), and search within that tr the element with class .base_width and use the text.