JSFiddle - React, Tailwind, and code Playground

by sun337

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<div class="demo_sub_outer">
		<input class="knob" data-thickness=".1" data-width="150" data-height="150" data-angleOffset=0 data-displayInput="true" data-angleArc=360 data-fgColor="#209652" data-bgColor="#eee" data-inputColor="" data-readOnly="true" value="80">
	</div>
	
	<div class="demo_sub" id="demo_sub_1">
		<input class="knob" id="sexy" data-thickness="0.5" data-width="130" data-height="130" data-angleOffset=0 data-displayInput="false" data-angleArc=360 data-fgColor="#b8dcc7" data-bgColor="#e5e5e5" value="" Title="Cumulative wealthiness" >
	</div>

CSS

.demo_sub_outer{
	height:140px;
	margin: auto;
}
.demo_sub{
	margin: auto;
	position: absolute;
	left:10px; 
	top:10px;
}

JavaScript

$(function($) {
    $(".knob").knob({
        
        change : function (value) {
            var prev_cum_votes = 3   // Let's say 3 other users have rated this book 80/100
            var prev_cum_val = this.$.closest(".demo_sub").siblings(".demo_sub_outer").find(".knob").val();
            var prev_my_val = this.$.closest(".demo_sub").children().find(".knob").val();
            console.log(prev_cum_val+" : "+prev_my_val);
            if( prev_my_val == 'NaN' || prev_my_val == 0 ){
                prev_my_val = 0
                sub_votes = 0
                console.log('hello');
            }
            else{
                sub_votes = 1
                prev_cum_votes = prev_cum_votes + 1
            }
            new_cum_votes = prev_cum_votes - sub_votes;
            prev_cum_val = ( prev_cum_votes*prev_cum_val - prev_my_val) / (new_cum_votes);
            new_cum_val = ( new_cum_votes*prev_cum_val + value ) / (new_cum_votes + 1)
            
            this.$.closest(".demo_sub").siblings(".demo_sub_outer").find(".knob").val(new_cum_val).trigger('change');
            console.log(new_cum_val);
            
            
        },
        release : function (value) {
            //SOME FUNCTIONS
        },
        
    });
});