Блог

Главная - Вопросы по программированию - Ползунок чисел с разным минимальным максимумом

Ползунок чисел с разным минимальным максимумом

#javascript

#javascript

Вопрос:

Я пытаюсь создать приложение, в котором пользователь перемещает ползунок, чтобы выбрать направление компаса, но все мы знаем, что ползунки обычно начинаются с 0 (слева) и заканчиваются на N (справа).

Я пытаюсь воспроизвести это: изображение компаса

Нижняя строка, я хочу, чтобы ползунок начинался с 270(West) , а центр должен быть 360 , и 0(0 degree North) , а затем, должен быть 0-90(North to East) тогда 90-180(East to South) , а затем 180-269(South to West)

Извините за плохой английский, не носитель языка. Если мое объяснение непонятно, пожалуйста, обратитесь к изображению.

Комментарии:

1. Привет, добро пожаловать в StackOverflow! Пожалуйста, поделитесь тем, что вы пробовали. С какими проблемами вы сталкиваетесь?

2. это диапазон типов ввода. Как объяснено здесь , вы можете использовать значение, чтобы оно начиналось со значения по умолчанию. Градусы там должны обрабатываться javascript, манипулирующим HTML-кодом по умолчанию

3. Учитывая, что у вас 90 градусов с одной стороны и 270 с другой, может быть немного сложно получить «Север» в середине компаса.

4. Что у вас есть на данный момент? Добавление a min max и initial value кажется достаточно простым, если вы прочитали документацию , на которую уже даны ссылки в комментариях.

5. Пожалуйста, отредактируйте вопрос, чтобы ограничить его конкретной проблемой с достаточной детализацией для определения адекватного ответа.

Ответ №1:

Если вы запустите ползунок на 270 градусов, то центр будет равен 90 градусам, потому что ваш компас не центрирован в диапазоне ползунка. Вы можете использовать отрицательные значения для определения применимого направления с некоторой математикой:

 $('#slider-degrees').change(() => {
  let selection = parseInt($('#slider-degrees').val());
  let degrees = (selection < 0) ? (360   selection) : selection;
  $('#label-degrees').html(degrees);
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider-degrees" type="range" min="-90" max="269" value="-90">
<span id="label-degrees"></span>
Метки: