JSFiddle - React, Tailwind, and code Playground

by Dan Daniel

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<div id="slider"></div>
<p id="plates">Plates: <span></span></p>
<div class="mbox mbox1"></div>

CSS

#plates{
  margin-bottom:50px; 
}
.mbox {
    display: inline-block;
    margin: 20px;
}
.mbox span {
    position: relative;
    width: 60px;
    height: 60px;
    margin: -52px 0;
    border: 1px solid #c4c4c4;
    background: #fff;
    display: block;
    transform: rotateX(36deg) rotateY(46deg) skew(-45deg, -3deg);
}

JavaScript

$(function(){
	$("#slider").roundSlider({
		min: 5000,
        max: 150000,
        step: 1000,
		value:15000,
		width:10,
		handleSize: "+20",
		startAngle: 90,
		mouseScrollAction: true,
		sliderType: "min-range",
		//beforeCreate: "traceEvent",
		create: "traceEvent",
		//start: "traceEvent",
		//stop: "traceEvent",
		change: "traceEvent",
		drag: "traceEvent"
	});
});	
  
function traceEvent(e) {
	var tp = $('.rs-tooltip').text() / 1000;
	console.log(tp);
  $('#plates span').text(tp);
  $('.mbox').html('');
	for (i = 0; i < tp; i++ )
  $('.mbox').append('<span/>');
}