“улучшение” input range

241

11 июля 2017, 21:16

Сделал <input type="range" value="0" min="-50" max="50" step="1"/>
Хотелось бы его модернизировать добавив пару интересных плюшек:
1. Если щёлкнуть по инпуту с зажатым ctrl, то значение value изменится на 0;
2. Если двигать ползунок с зажатым shift'ом, то значение step изменится на 10;

Как такое можно реализовать?

Answer 1

С первым пунктом легко. Недавно решали такой вопрос.

$(range).on('click', function(event) {
  if (event.ctrlKey) {
    $(this).val(0);
  }
})

Со вторым сложнее. Идея следующая, отлавливаем событие перемещения указателя mousemove. В обработчике проверяем нажата ли левая кнопка мыши и нажата ли клавиша Shift, если условия соблюдены, устанавливаем значение step равное 10

$(range).on('mousemove', function(event) {
  // Проверяем зажата ли левая кнопка мыши http://api.jquery.com/event.which/
  if (event.which === 1) {
    $(this).prop('step', event.shiftKey ? 10 : 1);
  }
})

Так же нужно обработать события нажатия стрелок:

$(range).on('keydown', function(event) {
  // Проверяем нажаты ли клавиши Left, Up, Right, Down
  if ([37, 38, 39, 40].indexOf(event.which) !== -1) {
    $(this).prop('step', event.shiftKey ? 10 : 1);
  }
});

Полный код примера

var range = $('input[type=range]'); 
 
$(range).on('click', function(event) { 
  if (event.ctrlKey) { 
    $(this).val(0); 
  } 
}) 
 
$(range).on('mousemove', function(event) { 
  if (event.which === 1) { 
    $(this).prop('step', event.shiftKey ? 10 : 1); 
  } 
}) 
 
$(range).on('keydown', function(event) { 
  // клавиши left, up, right, down 
  if ([37, 38, 39, 40].indexOf(event.which) !== -1) { 
    $(this).prop('step', event.shiftKey ? 10 : 1); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="range" value="0" min="-50" max="50" step="1" />