@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 ​​​​​​​