[Feature Request] Manually Type in Slider Value

[mermelmadness]

I would love to see a little text box next to the sliders that would allow for manually typed input (0-255). The slider can still adjust the value, but being able to type it in manually would save time to get to where the user knows what they want.

[tsr1tsr1]

Yes please

[werkstrom]

I can see the appeal... In some cases it is indeed desirable to be very precise when setting these values. A few caveats though:

• IMHO the absolute majority of users and use cases will prefer the current UI and functionality most of the time, i.e. The "granular control" should be available but not in the way/complicate of todays UI.
• Generally adding such functionality, widely, has implications way out of the initial scope as it interacts with all other input logic. Collateral damage should be expected.

Given the above a solution that is minimally invasive on existing functionality would, IMHO, be preferred. A suggestion would be to add a "double click" function to the range sliders. Double click will not be unintentionally triggered by users but is easily available for any user wanting granular control.

I would initially propose something like this code:

function actDblC(){
    const rngSlds = d.querySelectorAll('input[type="range"]');
    rngSlds.forEach(sld => {
    sld.addEventListener("dblclick", () => {
        const nVal = prompt(`New value (${sld.min}-${sld.max}):`);
        if (nVal !== null) {
        sld.value = nVal;
        sld.dispatchEvent(new Event("change"));
        }
    });
    });
}

This adds a double click listener to all range slider objects on tha page and pops up a standard input prompt. When committing a new value the "onchange" event of the original control is called as to preserve functionality.

I'll leave this code here for testing purposes. To test, do as follows:

1. Navigate to a page in WLED you want to test on. Main page will work fine, with the brightness slider f.ex.
2. Open up the console in your browser (press F12 and possibly find the console tab)
3. Paste the whole function into the console and hit ENTER
4. Activate the code by pasting actDblC(); into the console and hitting ENTER again.

Now if you double click on any range slider (like the brightness) you should be presented with a popup where you can enter a value.

Edit note: Added info on valid ranges to the prompt.

[blazoncek]

The problem really only exist on mobile devices where you have to use imprecise finger.
On computer you can always use arrow keys to set exact value.

[werkstrom]

Agreed, maybe some other cases like color temperature (RGBWs) where you appear to have much wider ranges.

[mermelmadness]

Could it be a feature disabled by default that you enable through UI settings, like the HEX color input box?