New to KendoReact? Start a free 30-day trial
Creating a Color Gradient on RangeSlider in KendoReact
Environment
| Product Version | 9.0.0 |
| Product | Progress® KendoReact RangeSlider |
Description
This KB article answers the following questions:
- How to customize the RangeSlider in React with a color gradient?
- How to represent a color temperature range using the RangeSlider in React?
- How to style the RangeSlider track and selection with custom colors in React?
Solution
You can display a color gradient on the RangeSlider component in a React application by customizing its default CSS styles. Apply a linear gradient to the slider's element and adjust the drag handle and selection background for a cohesive look. Here's how to achieve this styling:
css
.k-slider.myRangeSlider {
.k-slider-track {
background: rgb(255, 199, 37);
background: linear-gradient(90deg, rgba(255, 199, 37, 1) 19%, rgba(154, 208, 223, 1) 84%);
}
div.k-slider-selection {
background-color: transparent;
}
.k-draghandle {
background-color: white;
border-width: 2px;
}
}By following these steps, you can successfully add a color gradient to the RangeSlider component in your React application as demonstrated in the following demo:
Change Theme
Theme
Loading ...