Value and Ranges

The ProgressBar provides option for setting its value or a range of values and for indicating the progress of an ongoing task.

  • To set the value of the ProgressBar, use its value option.
  • To define the start and end values of the range, use the min and max ProgressBar settings respectively.
  • To indicate that a task is still in progress, set the value property to null.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { ProgressBar } from '@progress/kendo-react-progressbars';
import { Checkbox, NumericTextBox } from '@progress/kendo-react-inputs';

const App = () => {
    const [value, setValue] = React.useState(0);
    const prevValueRef = React.useRef();
    const min = -10;
    const max = 10;

    React.useEffect(() => {
        prevValueRef.current = value;
    });

    const prevValue = prevValueRef.current;

    const handleClick = () => {
        if (value == null) {
            setValue(prevValue);
        } else {
            setValue(null);
        }
    };

    const handleChange = (e) => {
        setValue(e.target.value);
    };
    return (
        <div className="container">
            <div className="row mb-4">
                <div className="col-sm">
                    <Checkbox id="indeterminate" onClick={handleClick} label="Toggle the indeterminate state" labelPlacement="before" />
                </div>
            </div>
            <div className="row mb-4">
                <div className="col-sm">
                    Value: <NumericTextBox max={max} min={min} value={value} onChange={handleChange} width={80} />
                </div>
            </div>
            <div className="row">
                <div className="col-sm">
                    <span className="mr-2">Min: {min}</span>
                    <ProgressBar
                        min={min}
                        max={max}
                        value={value}
                    />
                    <span className="ml-2">Max: {max}</span>
                </div>
            </div>
        </div>
    );
};

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);