ColorRangeData

17 Sep 20251 minute to read

It illustrates the color track data in slider.

import * as React from 'react';
import { SliderComponent, ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
public colorRange: ColorRangeDataModel[] = [{color:"#898b2b", start:10, end:45}];
  render() {
    
    return (
        <div id='container'>
            <div className='wrap'>
                <SliderComponent id='slider' value={30} colorRange={this.colorRange} />
            </div>
        </div>
    );
  }
}

Properties

color string

It is used to set the color in the slider bar.

Defaults to ’’

end number

It is used to get the end value for applying color.

Defaults to null

start number

It is used to get the starting value for applying color.

Defaults to null