svelte-ux

svelte-ux copied to clipboard

Currently there is RangeSlider

• [ ] Rename RangeSlider to RangeInput (or maybe MultiRangeInput)
• [ ] Add RangeField which combines Field and RangeInput
• [ ] Update RangeInput to support single value
• [ ] Consider adding native prop which uses a styled <input type="range" {min} {max} {step} />
  • Styled range input
• [ ] Consider consolidating NumberStepper
• [ ] Add ticks support
  • Input range with labeled ticks
• [ ] Add ColorRangeInput and expose maybe as type="color"
  • REPL
• [ ] 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
• https://codepen.io/cbolson/pen/WNBxRdP
• https://codepen.io/alvaromontoro/pen/ZYEYROo
• https://codepen.io/alvaromontoro/pen/LEYYmEr