svelte-ux icon indicating copy to clipboard operation
svelte-ux copied to clipboard

Add RangeField

Open techniq opened this issue 1 year ago • 0 comments

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} />
  • [ ] Consider consolidating NumberStepper
  • [ ] Add ticks support
  • [ ] Add ColorRangeInput and expose maybe as type="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

techniq avatar May 02 '23 19:05 techniq