Events in React Progress bar component

30 Jan 20237 minutes to read

valueChanged

This event is triggered when the progress value is changed.

index.jsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let progressInstance;
    function changeValue() {
        progressInstance.value = 80;
    }
    return (<div> <button onClick={changeValue}>Change value</button><br></br>
            <ProgressBarComponent id="linear" ref={linear1 => progressInstance = linear1} type='Linear' trackColor='gray' progressColor='blue' value={100} animation={{
            enable: false,
            duration: 2000,
            delay: 0
        }} valueChanged={(args) => {
            args.progressValue = 90;
        }}>
             </ProgressBarComponent>
         </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));

index.tsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import {IProgressValueEventArgs} from '@syncfusion/ej2-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  let progressInstance: ProgressBarComponent;
  function changeValue() {
    progressInstance.value = 80;
  }

  return(<div> <button onClick={changeValue}>Change value</button><br></br>
            <ProgressBarComponent id="linear"
                        ref={linear1 => progressInstance = linear1}
                        type='Linear'
                        trackColor='gray'
                        progressColor='blue'
                        value={100}
                        animation={{
                            enable: false,
                            duration: 2000,
                            delay: 0
                        }}
                        valueChanged={(args: IProgressValueEventArgs) => {
                          args.progressValue = 90;
                        }}>
             </ProgressBarComponent>
         </div>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));

progressCompleted

This event is triggered when the progress attains the maximum value.

index.jsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<ProgressBarComponent id="linear2" type='Linear' value={100} animation={{
            enable: true,
            duration: 2000,
            delay: 0
        }} progressCompleted={(args) => {
            args.value = 50;
        }}>
          </ProgressBarComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("container"));

index.tsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
import {IProgressValueEventArgs} from '@syncfusion/ej2-progressbar';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return(<ProgressBarComponent id="linear2"
                        type='Linear'
                        value={100}
                        animation={{
                            enable: true,
                            duration: 2000,
                            delay: 0
                        }}
                        progressCompleted={(args: IProgressValueEventArgs) => {
                          args.value = 50;
                        }}>
          </ProgressBarComponent>
        )
};
export default App;
ReactDOM.render(<App />, document.getElementById("container"));