uwu / shelter

an attempt to prepare for the worst
https://shelter.uwu.network/
Creative Commons Zero v1.0 Universal
349 stars 10 forks source link

[UI] add slider component #13

Closed SpikeHD closed 10 months ago

SpikeHD commented 10 months ago

Needed to recreate the Discord slider for a project, thought it might be something worth having the shelter-ui package :)

Tried to replicate existing code style but feel free to let me know if I did something weird. The CSS looks kinda yucky because I can't comma-seperate the selectors (at least, so I've heard/read).

*I'm also working on recreating the Discord select list, that'll be a separate PR ofc

Preview:

https://github.com/uwu/shelter/assets/25207995/3d133b64-8da8-410d-863c-84625fc3ccad

Which was made with this code:

<Slider
  min={50}
  max={125}
  steps={
    Array.from(Array(16).keys()).map(i => (i * 5 + 50) + '%')
  }
  step={5}
  value={settings().zoom}
  onInput={(v) => {}}
/>
yellowsink commented 10 months ago

Code style looks fine to me and looks really good visually at least to me :)

I'll review this properly and merge later, I'm busy for most of today

Many thanks for the contribution :) it is much appreciated