jqwidgets-scripts-custom/demos/React/app/knob/multiplecirclepointers/app.js

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

import React from 'react';
import ReactDOM from 'react-dom';

import JqxKnob from '../../../jqwidgets-react/react_jqxknob.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myKnob.on('change', (event) => {
            document.getElementById('change').innerHTML = 'Values: ' + event.args.value;
        });
    }
    render() {
        let marks = {
            colorRemaining: '#333',
            colorProgress: '#66707e',
            style: 'line',
            offset: '71%',
            thickness: 1,
            size: '6%',
            majorSize: '9%',
            majorInterval: 10,
            minorInterval: 2
        };

        let labels = {
            offset: '88%',
            step: 10
        };

        let progressBar = {
            style: [{ fill: '#66707e', stroke: '#66707e', strokeWidth: 0 },
            { fill: '#66707e', stroke: '#66707e', strokeWidth: 0 }],
            size: '9%',
            offset: '58%',
            background: { fill: '#a2da39', stroke: '#a2da39', strokeWidth: 0 }
        };

        let pointer = [
            { type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 },
            { type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 }
        ]

        let spinner = {
            style: { fill: '#66707e', stroke: '#66707e' },
            innerRadius: '0%', // specifies the inner Radius of the dial
            outerRadius: '58%', // specifies the outer Radius of the dial
            marks: {
                colorRemaining: '#a2da39',
                colorProgress: '#a2da39',
                type: 'circle',
                offset: '55%',
                thickness: 3,
                size: '1%',
                majorSize: '1%',
                majorInterval: 10,
                minorInterval: 10
            }
        }

        let changing = (oldValues, newValues) => {
            let range = newValues[1] - newValues[0];
            if (range < 10)
                return false;
            if (range > 90)
                return false;
        };

        return (
            <div>
                <JqxKnob ref='myKnob'
                    min={0} max={100} value={[60, 80]} startAngle={150} endAngle={510}
                    snapToStep={true} rotation={'clockwise'} style={{ fill: '#ebeced' }}
                    changing={changing} marks={marks} labels={labels}
                    progressBar={progressBar} pointer={pointer} spinner={spinner}
                />
                <div id='change' />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));