Range

The Range component draw a range between two values using polar coordinates.

Live Editor

<Knob size={100} angleOffset={220} angleRange={280} min={0} max={100}>
    <Range
        arcWidth={10}
        color="#e44b02"
        percentageFrom={0.0}
        percentageTo={0.5}
    />
    <Range
        arcWidth={10}
        color="#ffc90e"
        percentageFrom={0.5}
        percentageTo={0.75}
    />
    <Range
        arcWidth={10}
        color="#6caa03"
        percentageFrom={0.75}
        percentageTo={1.0}
    />
</Knob>

Result

Loading...

Properties

Prop	Description
arcWidth	Width of the arc. The arc will expand to the centre.
color	Color of the range.
percentFrom	Starting point of the range. If unset, percent value of the knob is used.
percentTo	Ending point of the range. If unset, percent value of the knob is used.
radius	Outer radius of the arc. Will be the knob size by default.