Search results

ColorRangeData API in React Slider API component

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