How to fix Range on jQuery-UI slider and trigger function on hange

Question

I have a basic form that calculates an estimated price based on quantity and one of three options. Then I tried to add a jQuery-UI slider. I need the slider to use the same values as the SELECT, in this case 10-100 but instead it seems to be using 19-109. This means I can't select the lowest value at all without using the SELECT and the max is right off the scale. I also need it to trigger my setAmount() function on slider change to update the price. I thought these would be easy to resolve but I'm still learning. I've included a jsfiddle and would be very appreciative if anyone could point me in the right direction.

Current Code:

<script type='text/javascript'>
$(document).ready(function(){
    var select = $( "#quantity" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 10,
      max: 100,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#quantity" ).on( "change", function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });

    $('.containing-element').children().on("change", function () {setAmount();});
    $("#quantity").on("change", function () {setAmount();});
});
</script>

https://jsfiddle.net/Bestrafung/2cwp9ud6/1

Answer 1

I believe you are getting incorrect behavior by using the selectedIndex from the #quantity select.

$(document).ready(function(){
    var select = $( "#quantity" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
        range: "min",
        value: 10,
        min: 10,
        max: 100,
        slide: function( event, ui ) {
            select.val( ui.value );
        },
        change: function(event, ui){
            setAmount();
        }
    });

    $('.containing-element').children().on("change", function () {
        setAmount();
    });

    select.on("change", function () {
        setAmount();
        slider.slider( "value", select.val() );
    });

function setAmount(){
    var a =  select.val();

    if (a <= 10){var q = 9.50}
    else if (a > 10 && a <= 20){var q = 7.5}
    else if (a > 20 && a <= 50){var q = 4.25}
    else if (a > 50 && a <= 100){var q = 2.50}

    if ($("#flip-min").val() == "noback") {$("#amount").val((a*q).toFixed(2));}
    if ($("#flip-min").val() == "hookback") {$("#amount").val((a*(q+.5)).toFixed(2));}
    if ($("#flip-min").val() == "stickyback") {$("#amount").val((a*(q+.6)).toFixed(2));}
  }
});

This should correct the behavior by using ui.value and modifying the select.