Question

我尝试做的是获取Slider Value＆＃34; sliderStatus＆＃34;出现在一个数字输入框中，也可以更改该值。

例如，如果滑块设置为199并且客户想要更快地选择200，则可以在框中输入值，或者使用+或 - 或任何其他方式进行调整。

<input id="slider" type="range" min="1" max="1000" value="1" step="1" style="margin-left:5%; margin-right:5%; width:90%;" />
<br />
<br />Slider Value = <span id="sliderStatus">1</span> 
<p id="demo"></p> 


<script>
    $("#slider").on('change',function() {
    var selectedQty = $(this).val();
    $('#sliderStatus').text(selectedQty);


    var itemTotal = 0;
     switch (true) {
        case (selectedQty <= 2) :
            itemTotal = 28 * selectedQty;
            break;
        case (selectedQty <= 5) :
            itemTotal = 26 * selectedQty;
            break;
        case (selectedQty <= 15) :
            itemTotal = 24 * selectedQty;
            break;
        case (selectedQty <= 30) :
            itemTotal = 22 * selectedQty;
            break;
        case (selectedQty <= 60) :
            itemTotal = 20 * selectedQty;
            break;
        case (selectedQty <= 100) :
            itemTotal = 18 * selectedQty;
            break;
        case (selectedQty <= 200) :
            itemTotal = 16 * selectedQty;
            break;  
        case (selectedQty <= 500) :
            itemTotal = 15 * selectedQty;
            break;       
        default:
            itemTotal = 14 * selectedQty;
            break;
    }

    $('#demo').text(itemTotal);
});  </script>

Answer 1

这将让您做出所需的行为：

 //code for the input box

$('#sliderval').on('input', function() {
   var selectedQty = $('#sliderval').val();

    $('#slider').val(selectedQty);
    $('#sliderStatus').text(selectedQty);
    calc(selectedQty);
});

//code for the slider itself

$("#slider").on('change',function() {
    var selectedQty = $(this).val();
    $('#sliderStatus').text(selectedQty);
   //update the value of the input box
     $('#sliderval').val(selectedQty);
    calc(selectedQty);
});  

//code for calculation

function calc(selectedQty) {

  var itemTotal = 0;
     switch (true) {
        case (selectedQty <= 2) :
            itemTotal = 28 * selectedQty;
            break;
        case (selectedQty <= 5) :
            itemTotal = 26 * selectedQty;
            break;
        case (selectedQty <= 15) :
            itemTotal = 24 * selectedQty;
            break;
        case (selectedQty <= 30) :
            itemTotal = 22 * selectedQty;
            break;
        case (selectedQty <= 60) :
            itemTotal = 20 * selectedQty;
            break;
        case (selectedQty <= 100) :
            itemTotal = 18 * selectedQty;
            break;
        case (selectedQty <= 200) :
            itemTotal = 16 * selectedQty;
            break;  
        case (selectedQty <= 500) :
            itemTotal = 15 * selectedQty;
            break;       
        default:
            itemTotal = 14 * selectedQty;
            break;
    }

    $('#demo').text(itemTotal);


}

JSFiddle

滑块和数字输入框控制相同的数字

1 个答案: