0

I'm creating a simple to-do list with checkboxes and progress sliders, and above of all that there is going to be a Total Progress % -bar which takes to count every checked checkbox and the selected value of the sliders.

I have managed to get the checkbox value, which is determined in the HTML as data-value (I am using pre-defined values in HTML for each step, as the value differs per task) and printed it out successfully, but I do not know how to get the value of the slider out.

HTML

<tr>
   <td valign="top">
       <b>Step 1 / layout</b>
   </td>
   <td valign="top">
       <input class="mngr-field" type="checkbox" name="payment_type_mngr_1_01" id="payment_type_mngr_1_01" data-value="10">
            &nbsp; <b>Done</b>
   </td>
</tr>
<tr>
   <td valign="top">
       <b>Step 2</b>
   </td>
   <td valign="top">
       <label for="payment_type_mngr_1_02"><input class="mngr-field mngr-slider" type="text" name="payment_type_mngr_1_02" id="payment_type_mngr_1_02" readonly style="border:0; color:#f6931f; font-weight:bold;"> valmis</label>
       <div id="slider"></div>
   </td>
 </tr>

JavaScript

// The Slider
$(function () {
    $("#slider").slider({
        value: 0,
        min: 0,
        max: 100,
        step: 10,
        animate: true,
        slide: function (event, ui) {
            $(".mngr-slider").val(ui.value + "%");
        }
    });
    sliderval = $(".mngr-slider").val;
    $(".mngr-slider").val($("#slider").slider("value") + "%");
});


// Total Progress %
$(".mngr-field").on("change", function () {
    var val = this.checked ? $(this).data("value") : '0';
    if ($(this).hasClass("mngr-slider")) {
        val = sliderval / 10;
    }
    console.log(val);
});

So basically I am going to get out the slider value and divide it by 10 (as the maximum value of the slider is 100 and so is the maximum value of the Total Progress %.

My purpose is to get the value and sum it all up so there will be one total value rolling out, if you could help me solve this problem and provide at least a tip on how to count it all together, I'll be pleased!

Pepelius
  • 1,576
  • 20
  • 34
  • Could you add a fiddle? – Sandeep Nayak May 20 '16 at 08:36
  • I'm having too much local resources that are required in order for it to look good (jQuery UI for example), but here you go: https://jsfiddle.net/ProDexorite/80ztLzjr/ – Pepelius May 20 '16 at 08:43
  • Actually it requires the jQuery UI for the slider to work, but if you can find it on a CDN, it should work out just good. – Pepelius May 20 '16 at 08:44
  • @TJ: Not working in my case, already tried it out. I get an uncaught error "cannot call methods on slider prior to initialization; attempted to call method 'option'. :( – Pepelius May 20 '16 at 08:54
  • @ProDexorite then you should be asking "Why I get error x with my attempt y"... there are lots of [search results](https://www.google.co.in/search?q=uncaught+error+%22cannot+call+methods+on+slider+prior+to+initialization%3B+attempted+to+call+method+%27option%27&oq=uncaught+error+%22cannot+call+methods+on+slider+prior+to+initialization%3B+attempted+to+call+method+%27option%27&aqs=chrome..69i57&sourceid=chrome&ie=UTF-8) for your error. You should try them and explain why none of them worked when asking a new question. – T J May 20 '16 at 08:57

0 Answers0