Logarithmic sliders

[flatmax]

Love the spectrum slider.

It would be very useful is to have a "log" mode. Where the slider becomes logarithmic. Lots of audio applications require the frequency spectrum to be mapped like the ear maps it. A very rough approximation is to use log10(x) and pow(10,x).

[Westbrook]

I'll admit, that I both don't fully understand our new normalization API or what it means for a slider to be "logarithmic", yet. However, I'm doing a little research into both of these here: https://webcomponents.dev/edit/FvN3HFhQP05EOx2XZDIb/ Maybe with this baseline you could get somewhere with this?

The guts here are:

get normalization() {
    return {
      toNormalized(value: number, min: number, max: number) {
          const scale = (Math.log10(max) - Math.log10(min));
          const val = (Math.log10(value) - Math.log10(min)) / scale;
          return val;
      },
      fromNormalized(value: number, min: number, max: number) {
          const scale = (Math.log10(max) - Math.log10(min));
          const val = Math.pow(10, value * scale + Math.log10(min));
          return val;
      },
    }
  }

@cuberoot gifted us this powerful addition to the Slider API, maybe he has some thoughts?

Once we work this out fully, would love to get it added to our documentation/testing suite(s).

[flatmax]

Yes - that looks like the ticket ! Nice work.
For audio needs, 20 to 20k Hz is good. I forked your original here :
https://webcomponents.dev/edit/O38cUyW61m6Q0Dveirs6/src/index.ts

[mahdiridho]

Hi,

Let me pointing another discussion link here as we have a related case to implement the logarithmic onto multiple slider handles:

#1634

I can't find the solution for this case and my code doesn't work as expected :

https://webcomponents.dev/edit/kaD0OYQF2ayiSrtBtAOe/src/index.ts?p=stories

It doesn't seem the "normalization" would work for multiple slider handle

Any idea?

[Westbrook]

normalization doesn't apply "systematically" to a Slider with multiple handles. You need to apply to normalization to each handle directly, see: https://webcomponents.dev/edit/GDlWKKD1EtNDXCmMNvPK/src/index.ts?p=stories

[mahdiridho]

Thanks @Westbrook it works nicely