Как сделать range slider который будет изменяться по клику на кнопку?

Question

[nen0y]

При нажатии на кнопку + / - , значение в input должно увеличиваться / уменьшаться на 50. При этом handler на range, должен реагировать на эти изменения. Как это сделать?

https://codepen.io/5dc8b3/pen/yLaMPXM

Answer 1

[Danny Arty]

Можно проще сделать. Я просто в лоб пошел

Answer 2

[0xD34F]

const interval = [ 0, 150 ];

const $slider = $('#storlekslider').slider({
  range: 'max',
  min: interval[0],
  max: interval[1],
  step: 1,
  slide: (e, ui) => update(ui.value),
});

const $input = $('#storlek_testet').on('input', e => update(e.target.value));

$('button').click(e => update(+$input.val() + 50 * ($(e.target).text() === '+' ? 1 : -1)));


function update(val) {
  val = Math.max(interval[0], Math.min(interval[1], val));
  $input.val(val);
  $slider.slider('value', val).find('.ui-slider-handle').text(val);
}