[jQuery] jQuery UI: Range slider with input text

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

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

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

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

> – [Slider | jQuery UI](https://jqueryui.com/slider/#range)
> – [jQuery UI： Sliderウィジェットでスライダーを生成するには？ – Build Insider](https://www.buildinsider.net/web/jqueryuiref/0014)

“`javascript
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 して変更を反映させます。

> – [javascript – Can we use jQuery UI price range slider value with input text – Stack Overflow](https://stackoverflow.com/questions/45345082/can-we-use-jquery-ui-price-range-slider-value-with-input-text)

“`javascript
// 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 としています。

> – [Number.isInteger() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger)

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

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

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

## 補遺

> – [noUiSlider – JavaScript Range Slider | Refreshless.com](https://refreshless.com/nouislider/)
> – [HTML5で追加された input[type=number] を使う上での注意 – Qiita](https://qiita.com/myzkyy/items/5630c32097aa68315cc5)