Estoy tratando de crear una aplicación en la que el usuario deslice el control deslizante para seleccionar una dirección de la brújula, pero todos sabemos que los controles deslizantes generalmente comienzan en 0 (izquierda) y terminan en N (derecha) .
Estoy tratando de replicar esto:
En pocas palabras, quiero que el control deslizante comience en 270(West) y el centro debe ser 360 y 0(0 degree North) y luego debe ser 0-90(North to East) luego 90-180(East to South) y luego 180-269(South to West)
Lo siento por el mal inglés, no hablante nativo. Si mi explicación no es comprensible, consulte la imagen.
Si inicia el control deslizante en 270 grados, entonces el centro estaría a 90 grados, porque su brújula no está centrada en el rango del control deslizante. Puede usar valores negativos para determinar la dirección aplicable con algunas matemáticas:
$('#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>