Search code examples
javascripthtmlcsssliderround-slider

Round Slider - set a higher value to the min-handle and vice versa

This is my current implementation of a roundslider (docs: http://roundsliderui.com/). I need to be able to choose values Nov-Mar for example. Any ideas?

$("#round").roundSlider({
  sliderType: "range",
  min: 1,
  max: 12,
  tooltipFormat: function(args) {
    var months = ["", "Jan", "Feb", "Mar",
      "Apr", "Maj", "Jun", "Jul",
      "Aug", "Sep", "Okt",
      "Nov", "Dec"
    ];
    return months[args.value];
  },
});

HTML 

<div id="round" class="rslider"></div>

Scripts 

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>  
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>  
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>

CSS 

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
Solution

  • With the roundSlider 1.3 version, there is a property "_invertRange" added internally to allow the invert range selection. I hope, by enable this property you can achieve your requirement.

    Please check the below demo, and update whether this helps you:

    DEMO