svelte-ux
svelte-ux copied to clipboard
Add RangeField
Currently there is RangeSlider
- [ ] Rename RangeSlider to
RangeInput
(or maybeMultiRangeInput
) - [ ] Add
RangeField
which combinesField
andRangeInput
- [ ] Update
RangeInput
to support single value - [ ] Consider adding
native
prop which uses a styled<input type="range" {min} {max} {step} />
- [ ] Consider consolidating
NumberStepper
- [ ] Add ticks support
- [ ] Add
ColorRangeInput
and expose maybe astype="color"
- [ ] Replace LayerChart's RangeField (but leverage some of the ideas like showing the number, etc
- Support clicking number to set (with proper mobile keyboard)
- [ ] Consider adding a CircularSlider (or
CircleRangeInput
)
Examples:
- https://observablehq.com/@mootari/range-slider#doc_interval
- https://www.radix-ui.com/docs/primitives/components/slider
- https://mhkeller.com/svelte-double-range-slider/
- https://github.com/mhkeller/svelte-double-range-slider
- https://github.com/simeydotme/svelte-range-slider-pips
- https://codepen.io/simeydotme/pen/WNLxxvx
- https://codepen.io/simeydotme/pen/PoaOmjr
- https://ant.design/components/slider
- https://mui.com/material-ui/react-slider/#range-slider
- https://vuetifyjs.com/en/components/range-sliders/
- https://chakra-ui.com/docs/components/range-slider
- https://codepen.io/seanstopnik/pen/nKjmPX
- https://codepen.io/MarioD/pen/WwXbgr
- Multi Range input, CSS-only
- https://codepen.io/mayuMPH/pen/ZjxGEY
- https://codepen.io/jackiejohnston/pen/NNrpjQ
- https://codepen.io/mukealicious/pen/jWoeZY
- https://observablehq.com/@bumbeishvili/data-driven-range-sliders
- Multi-range conjoined tooltip
- https://slider-react-component.vercel.app/demo/range
- Skeuomorphic Range Slider
- Skeuomorphic Range Slider
- Skeuomorphic RGB sliders
- Styled Range Input with Label
- Input type range + label CSS vars TEST
- Input range with morphing knob part II
- https://codepen.io/uiswarup/pen/zYybQBX
- https://codepen.io/aaroniker/pen/eYzMveV
- https://daisyui.com/components/range/
- CSS Thermometer