Increment and decrease value with slider (slider)

Question

How can I create a flexible price list similar to this.

Is there any Javascript/jQuery plugin to implement these functions, that I can customize it?

Answer 1

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

To create your own table you can make a table simple HTML. What jQuery/Slider needs is a div so he can change and insert the button inside.

An example would be:

Demo: http://jsfiddle.net/y8Ye4/

$(".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 in HTML in "date" fields. A row 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 plugin page can find configuration options. The ones I used were:

• range: tell the slider which is of type "fixed minimum range"
• min: starting value
• max: maximum value
• step: the increment value
• slide: a function that updates the display every step of the slider

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 the parseFloat(numero, base); that converts strings into floating numbers. This method is practical because it removes the text as well. And the number that I use inside I will get looking for the tr nearest (climbing up the DOM tree), and searching inside this tr the element with class .base_width and use text.