roundSlider with pie slices

roundSlider with pie slices

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pieRenderer.min.js"></script>
<h2><a target="_blank" href="https://roundsliderui.com/">roundSlider with Pie slices</a></h2>

<div id="slider_container">
  <div id="slider1"></div>
  <div id="chart1" style="height: 100%; width: 100%;"></div>
</div>

CSS

#slider_container {
  position: relative;
}
#slider1, #chart1 {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var chartDiameter = 280;
$("#slider_container").height(chartDiameter).width(chartDiameter);

// chart creation for the Pie slices
var chartObj = jQuery.jqplot('chart1', [[1,1]], {
  grid: { borderWidth: 0, backgroundColor: 'transparent', shadow: false },
  gridPadding: { top:0, bottom:0, left:0, right:0 },
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    shadow:false,
    rendererOptions: {
      highlightMouseOver: false,
      diameter: chartDiameter-5,
      sliceMargin: 4,
      startAngle: -90
    }
  },
  seriesColors:['#85c846', '#ffa676', '#7fb5bb']
});

// round slider creation with two handles
$("#slider1").roundSlider({
  sliderType: "range",
  radius: (chartDiameter / 2),
  width: 2,
  showTooltip: false,
  animation: false,
  startAngle: 90,
  min: 0,
  max: 360,
  value: "45, 180",
  handleSize: 24,

  svgMode: true,
  borderWidth: 0,
  rangeColor: "transparent",
  pathColor: "transparent",

  valueChange: function(e) {
    // based on the slider value update the pie slices also
    var val1 = e.handles[0].value,
        val2 = e.handles[1].value,
        max = e.options.max;

    var data = [
      [1, val1],
      [2, (val2 - val1)],
      [3, (max - val2)]
    ];

    chartObj.series[0].data = data;
    chartObj.replot();
  },
});