Multiply span text based on radio button and Jquery slider selection

Question

I am trying to put together a selection flow for a product, and I am having a slight issue with defining a value.

Essentially what I am trying to do is have a total output based on which option they choose which is multiplied by the amount of lines. I'm not sure on how to do this however as the slider doesn't go up in regular increments.

 $("#slider").slider( { value:1, min: 0, max: 9, step: 1, } ); var items =[ '1 <br>line','2 <br>lines','3 <br>lines','4 <br>lines','5 <br>lines','8 <br>lines','10 <br>lines','15 <br>lines','20+ <br>lines']; var s = $("#slider"); s.slider({ min:1, max:items.length }); var oneBig = 100 / (items.length - 1); $.each(items, function(key,value){ var w = oneBig; if(key === 0 || key === items.length-1) w = oneBig/2; $("#legend").append("<label style='width: "+w+"%'>"+value+"</laben>"); }); //sum start /////////////// $(":radio").on("change", function(){ var total = 0; $(":radio:checked").each(function(){ total += Number(this.value); }); $("#total").text(total); }); 

 h3 { margin-top:30px; } #slider label { position: absolute; width: 20px; margin-left: -10px; text-align: center; margin-top: 20px; } #slider { width: 100%; margin: 2em auto; } .lines { font-size:10px; } label { display: inline-block; text-align:center; line-height: 1.5; font-weight:bold; } label:first-child { text-align:left; } label:last-child { text-align:right; } .slide-col #slider a { border: 1px solid #fff; background: #1b2a3d; } 

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <input class="qty1" name="phone" type="radio" value="5.99" />option 1 <input class="qty1" name="phone" type="radio" value="9.99" />option 2 <input class="qty1" name="phone" type="radio" value="7.99" />option 3 <div id="slider"></div> <div id="legend"></div> <br> <h3>Your total is: £<span id="total">0.00</span></h3> 

Answer 1

Update: You may customize slider's values. Also adding function to calculate total value.

 let $slider = $('#slider'), $legend = $('#legend'), $total = $('#total'), total = 0, lines = [1, 2, 3, 4, 5, 8, 10, 15, 20]; lines.forEach( (value, key) => { let oneBig = 100 / (lines.length - 1); let width = (key === 0 || key === lines.length -1) ? oneBig / 2 : oneBig; let text = (key !== lines.length - 1) ? value + ' <br>lines' : value + '+ <br>lines'; let label = $('<label/>') .css({ 'width': width + '%'}) .html(text); $legend.append(label); }); $(":radio").on("change", function(){ updateTotal(lines[$slider.slider("option", "value")]); }); $slider.slider({ value: 0, min: 0, max: 8, step: 1, create: () => { updateTotal(lines[$slider.slider('value')]); }, slide: (events, ui) => { updateTotal(lines[ui.value]); } }); function updateTotal (value) { total = value * $("input[name='phone']:checked").val(); $total.text(total.toFixed(2)); } 

 h3 { margin-top: 10px; } #slider label { position: absolute; width: 20px; margin-left: -10px; text-align: center; margin-top: 20px; } #slider { width: 100%; margin: 1em auto; } .lines { font-size:10px; } label { display: inline-block; text-align:center; line-height: 1.5; font-weight:bold; } label:first-child { text-align:left; } label:last-child { text-align:right; } .slide-col #slider a { border: 1px solid #fff; background: #1b2a3d; } 

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <input class="qty1" name="phone" type="radio" value="5.99" checked/>option 1 <input class="qty1" name="phone" type="radio" value="9.99" />option 2 <input class="qty1" name="phone" type="radio" value="7.99" />option 3 <div id="slider"></div> <div id="legend"></div> <br> <h3>Your total is: £<span id="total">0.00</span></h3> 

Answer 2

Try something like this : http://jsfiddle.net/b64Ug/224/ if you notice, I have attached the 'slide' attribute to your slider which will be invoked every time the slider value changed. You may want to add some checks for the edge cases.

$("#slider").slider(
    {
        value:1,
        min: 0,
        max: 9,
        step: 1,
    }
);
var valueMap = [0, 1, 2, 3, 4, 5, 8, 10, 15, 20];

var items =[ '1 <br>line','2 <br>lines','3 <br>lines','4 <br>lines','5 <br>lines','8 <br>lines','10 <br>lines','15 <br>lines','20+ <br>lines'];

var s = $("#slider");

s.slider({
  min:1,
  max:items.length,
  slide: function( event, ui ) {
        $("#total").text("$" +  (valueMap[ui.value] * $('input[name=phone]:checked').val()));
      }
});

var oneBig = 100 / (items.length - 1);

$.each(items, function(key,value){
  var w = oneBig;
  if(key === 0 || key === items.length-1)
    w = oneBig/2;

  $("#legend").append("<label style='width: "+w+"%'>"+value+"</laben>");  

});



//sum start ///////////////



$(":radio").on("change", function(){
    var total = 0;
    $(":radio:checked").each(function(){
        total = Number(this.value) * valueMap[Number($( "#slider" ).slider( "value" ))];
    });

   $("#total").text(total);
});