JQuery Slider - Как также изменить изменение входного значения ползунка - PullRequest
Новая
       43

JQuery Slider - Как также изменить изменение входного значения ползунка

0 голосов
/ 25 июня 2018

В дополнение к изменению значений ввода при смене ползунка ... как я могу наоборот изменить ползунок при изменении ввода?

HTML: 

<div style="margin-bottom:20px;">
    <label for="amount">Price range:</label>
    <span style="float:right;"> 
        <input id="amount-min" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
        <input id="amount-max" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
    </span>
</div>
<div id="slider-range"></div>

JavaScript: 

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {

            $( "#amount-min" ).val( ui.values[ 0 ] );
            $( "#amount-max" ).val( ui.values[ 1 ] );
        }
    });

    $( "#amount-min" ).val( $( "#slider-range" ).slider( "values", 0 ) );
    $( "#amount-max" ).val( $( "#slider-range" ).slider( "values", 1 ) );

    $('#amount-min').on('change', function () {
        $(this).val( $( "#slider-range" ).slider( "values", 0 ) );
    });        

    $('#amount-max').on('change', function () {
        $(this).val( $( "#slider-range" ).slider( "values", 1 ) );
    });         

});

Fiddle:

http://jsfiddle.net/6e4gLmc2/

Я хочу сохранить исходный диапазон, как указано. И я хочу разрешить только входное значение, которое находится в пределах диапазона и учитывая другое значение

1 Ответ

0 голосов
/ 25 июня 2018

Я предлагаю вам изменить on change на on input.Работает лучше на type number входах, так как вы хотите, чтобы значение немедленно изменялось, когда пользователь изменяет значения на входах (в том числе со стрелками или клавишами вверх / вниз)

Это событие похоже насобытие onchange.Разница в том, что событие oninput происходит сразу после изменения значения элемента, тогда как onchange происходит, когда элемент теряет фокус, после изменения содержимого.

Затем просто добавьте this.val() (который является входным значением) как низкое или высокое значение slider

$(function() {
     $("#slider-range").slider({
       range: true,
       min: 0,
       max: 500,
       step: 0.001,
       values: [35.113, 300.123],
       slide: function(event, ui) {

         $("#amount-min").val(ui.values[0]);
         $("#amount-max").val(ui.values[1]);
       }
     });
     
     $("#amount-min").val($("#slider-range").slider("values", 0));
     $("#amount-max").val($("#slider-range").slider("values", 1));
     console.log(
         $("#amount-min").val() );
     $('#amount-min').on('input', function() {
       if ($(this).val() < $("#amount-max").val()) {
         $("#slider-range").slider('values', 0, $(this).val());
       }

     });

     $('#amount-max').on('input', function() {
       if ($(this).val() > $("#amount-min").val()) {
         $("#slider-range").slider('values', 1, $(this).val());
       }
     });


   });
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>



<div style="margin-bottom:20px;">
  <label for="amount">Price range:</label>
  <span style="float:right;">	
						<input id="amount-min" step=".001" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
						<input id="amount-max" step=".001" type="number" placeholder="0.000" style="border: 1px solid #ddd;; color:#f6931f; font-weight:bold; text-align:center; width:75px; padding-bottom: 0px; padding-top: 0px;">
					</span>
</div>
<div id="slider-range"></div>
...