Number slider with different min max

Question

I am trying to make an app where user slides the slider to select a compass direction, but we all know that sliders usually starts at 0 (left) and ends at N (right) .

I am trying to replicate this:

Bottomline, I want the slider to start at 270(West) and the center should be 360 and 0(0 degree North) and next should be 0-90(North to East) then 90-180(East to South) and then 180-269(South to West)

Sorry for bad english, not native speaker. If my explanation is not understandable, please refer to the image.

Answer 1

If you start the slider on 270 degrees, then the center would be 90 degrees, because your compass is not centered on the slider range. You can use negative values to determine the applicable direction with some math:

 $('#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>