Question
Schwartz
US
Last activity: 13 Feb 2025 6:11 EST
Question about Custom Slider
Hello, Everyone. I'm attempting to make the out-of-the-box slider two distinct colors before and after the handle. It should look somewhat like this. https://assets.justinmind.com/wp-content/webp-express/webp-images/uploads/2020/11/slider-design.png.webp Thank you in advance! **Edited by Moderator Marissa to include Capability tags**
HCA Healthcare
US
@DonteS17363277To create a custom slider in Pega Constellation 24.2 with two distinct colors before and after the handle, you can use CSS. Apply a linear-gradient to the slider's track, where one color covers the filled portion and another color covers the unfilled portion. For example, use background: linear-gradient(to right, #00BFFF 50%, #d3d3d3 50%); on the slider's input[type=range]. Customize the slider handle using ::-webkit-slider-thumb to adjust its size, color, and border. If you need the colors to change dynamically as the slider moves, you can use a JavaScript function that updates the gradient based on the slider's current value. Place the CSS in your component's style sheet or apply it directly through the theme configuration if available. This approach works for most modern browsers and keeps the UI clean without needing custom DX components
Elisabeth Bennett
US
@Sairohith Doodle Jump How to use CSS to create a two-color slider in Pega Constellation 24.2 is very useful! Updating the gradient with JavaScript makes the interface more intuitive. Thanks for sharing this solution!
Antler Microsystems
US
This is exactly the information I was looking for. It is possible to create a custom slider in Pega Constellation 24.2 quickly and easily. Created with JavaScript function with CSS into style sheet with modern browsers.