,

[jQuery] jQuery UI: Range slider with input text

公開日: 2019/07/23

input テキストの値の変更をスライダーに反映させます。

最初に完成したコードを。

See the Pen
jQuery UI: Range slider with input text by DriftwoodJP (@DriftwoodJP)
on CodePen.

jQuery UI のレンジスライダーを設置します。

  const sliderRange = $("#slider-range");

  sliderRange.slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    change: function(event, ui) {
      $("#amount_min").val(ui.values[0]);
      $("#amount_max").val(ui.values[1]);
    },
    create: function() {
      let values = $(this).slider("option", "values");
      $("#amount_min").val(values[0]);
      $("#amount_max").val(values[1]);
    }
  });

input を bind して変更を反映させます。

  // Bind onchange event to inputs.
  $("#amount_min").change(function() {
    let amount_min = toInt($(this).val());
    let amount_max = toInt($("#amount_max").val());

    if (amount_min >= amount_max) {
      amount_min = amount_max;
    }

    sliderRange.slider("values", 0, amount_min);
  });

input の値は整数か判定し、違う場合は 0 としています。

  // Input value to Integer.
  const toInt = input => {
    let val = Number(input);

    if (Number.isInteger(val)) {
      return Number(val);
    } else {
      return 0;
    }
  };

スライダーで楽にラフに値を入力できるのにテキスト入力をさせるのは、使い勝手が悪くなってしまうと私は考えます。
実際に使うケースは少なさそうですが習作として。

補遺