Slider UI Example

Show and Tell
#1

Hi *,

in case you need a slider element…

https://anvil.works/build#clone:LNO2U3KPOCGQLNH4=GHMRXF42A7JUVUPP6ZTDXUYH

CSS inspiration & credits: https://freefrontend.com/css-range-sliders/

1200×680

br;

6 Likes
#2

That’s nice!

#3

ooo, you’re shaming me into finishing mine now… :slight_smile:

#4

Simple and slick! Any chance you can release that under a permissive open-source licence (eg Apache 2)? We’re thinking of assembling a gallery of “free to use in your projects” components and libraries…

4 Likes
#5

“Free to use” sounds great! Updated to Apache License Version 2.0.

2 Likes
#6

Thanks, @homebrew! I needed this.

Btw, I re-wrote the form to work with multiple instances of the slider… =)
Also added capability to change the min, max and step properties.

https://anvil.works/build#clone:PVA6F6AGMQ5M2EV6=2XW36N66ICGZZQGUJE5BTLEN

1 Like
#7

Well, that’s pretty excellent! Are you happy for us to add this to the Component Library?

If so, what names do you (@homebrew and @renrengabas) want to be credited as? (I’ll just use your forum usernames if you don’t want your names out there)

#8

That would be super, @meredydd ! =) @renrengabas will do just fine for me.

Since you’re showcasing it there, I made a simple “Slider” with no number so it can easily be dropped as a widget into projects, and the label can be customized in Python.

PS: Styling for webkit browsers has issues due to use of non-standard “-ms-lower-fill” and “-moz-range-progress”. :frowning:

I was horrified at how the slider showed up on Edge and Chrome. I just had to go back and fix them… users on FF and Edge should have a similar experience. Chrome… well, it’s different. Not bad, just different.

#9

Now posted in the library:
http://anvil.works/library/slider

I made three changes before publishing:

  1. I put the CSS into the Native Libraries section so that it works out-of-the-box when you import it as a dependency.

  2. I changed attr() to prop() in the Javascript, so that you can update the properties after the slider has been displayed. (This involved turning the level property into a Python @property so we can trigger an update when it gets changed)

  3. I changed the name of the event to change (officially defined custom component events don’t have to start with x-!), and made it pass the level parameter explicitly.

#10

I made two changes before publishing:

That’s 3 changes … :slight_smile:

#11

Great improvement! Thank you guys.

1 Like
#12

I’d like to use this component but embed it within my app rather than as a dependency.

That means copying the code into my own app - but the licence hasn’t been properly applied.

There’s an appendix at the bottom of the licence text which describes how to apply it - basically add some boilerplate text as a comment to each file in the library with the copyright details completed - and that doesn’t appear to have been done.

Could you please add those licence terms so I might use this code freely?

Many thanks

1 Like
#13

Damn I was just about to ask for this in the feature request. That was amazing!

1 Like