360 degree circle range select input widget
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2. Include input form element which should contain your circle range (format "startDegrees;endDegrees")
<input type="text" class="circle-range-select" value="0;360">
The initial value can be defined via the value attribute:
value="0;360"
It is also possible to override the min, max and unit options:
data-min="0"
data-max="360"
data-unit="°"
If you only need a single value instead of a range, you can add the data-single-value attribute.
data-single-value
You can add a backround-image with data-bg-image.
data-bg-image="http://..."
The value of the input form field then only consists of a single number and not a number pair.
<link rel="stylesheet" href="dist/jquery.lcnCircleRangeSelect.css">
<script src="dist/jquery.lcnCircleRangeSelect.js"></script>
<script>jQuery('input.circle-range-select').lcnCircleRangeSelect();</script>