Как исправить Range на слайдере jQuery-UI и функцию триггера на Hange

Question

У меня есть базовая форма, которая рассчитывает приблизительную цену на основе количества и один из трех вариантов.Затем я попытался добавить слайдер jQuery-UI.Мне нужно, чтобы ползунок использовал те же значения, что и SELECT, в данном случае 10-100, но вместо этого он использует 19-109.Это означает, что я не могу выбрать самое низкое значение вообще, не используя SELECT, и максимальное значение сразу за шкалой.Мне также нужно, чтобы он вызывал мою функцию setAmount () при смене слайдера, чтобы обновить цену.Я думал, что это будет легко решить, но я все еще учусь.Я включил jsfiddle и был бы очень признателен, если бы кто-нибудь мог указать мне правильное направление.

Текущий код:

<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

Я полагаю, что вы получаете неправильное поведение, используя selectedIndex из #quantity выбора.

$(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));}
  }
});

Это должно исправить поведение с помощью ui.value и изменения выбора.