Highlight filled portion of ADSR sliders in golden

[baync180705]

Description:

Currently, the ADSR (Attack, Decay, Sustain, Release) sliders display the slider thumb and track in default colors. To improve visual consistency and make it clear how much of each slider has been adjusted, the filled portion of the slider should be displayed in the same golden color as the font labels.

Here is the screenshot assigned for your reference.

Tasks:

• Update the slider CSS to change the filled portion to golden (matching the font color).
• Ensure that the unfilled portion remains the current dark background color.
• Test the change across all four sliders (Attack, Decay, Sustain, Release).
• Verify that the change works across different browsers and screen sizes.

Expected Outcome:

• The sliders should visually display the filled portion in golden.
• The interface should feel more cohesive, and the user should easily see the current value of each slider at a glance.

[Mrigank118]

Hi! 👋 I’d like to work on this issue for Hacktoberfest. Could you please assign it to me?

[baync180705]

Hey @Mrigank118 , thanks for reaching out ! I would first recommend you to go through the code and let us know your approach for the same.

[Mrigank118]

Hey @Mrigank118 , thanks for reaching out ! I would first recommend you to go through the code and let us know your approach for the same.

Thanks for the guidance! I’ll first go through the code to understand how the ADSR sliders are implemented. After reviewing it, I’ll share my approach for updating the filled portion to match the golden color before making any changes.

[baync180705]

Hey @Mrigank118 ! Any updates from your end ?