Newbie: Custom css for native slider?

I’m guessing this is not possible for me, but…
I want to make the background ‘bar’ of the default input slider to be a gradient.

Using html element, I can’t even change the background color of the bar itself.
What I’ve done:

  1. Add an HTML element with:
#foo { background-color: blue;
  1. Added name ‘foo’ to the ID for the slider element.

  2. What. it does: changes the background but of course not the bar of the slider.


How would I even know what to reference inside that custom ? I can give the slider an ID, but I don’t know how to ‘talk’ to some of the parts that make up that element… if I look inside the HTML of the page, it looks like this:

And I have no idea how to talk to any of those things from within the HTML element.
I HAVE looked for YouTube videos etc. but if there’s a paid course that goes into this level of detail… I have only the tiniest CSS knowledge. Enough to get by in copy/paste when doing everything myself. In five minutes I can get a gradient on a slider in my own from-scratch HTML, but no idea how to step in to the middle of the elements in Bubble. Or if I even should.

Thanks, and again, apologies for the extremely basic questions.

I found this neat one, but I haven’t tried to inject an element into bubble, so maybe someone here can show the likely basic code required to read the input value.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.