Comments (8)
Hey, we didn't have plans to change the design of this for 2.0.
Ideally the functionality we'd add in a web component would be things like support for multiple handles, scale options, better data ticks, value display etc. It'll also be easier to style since browser support for range inputs is pretty inconsistent 🙏.
from calcite-design-system.
I think we need to modify the above designs to have both handles vertically centered on the range track, especially in dense applications.
The above labels also interfered with form labels and can take up a lot of vertical space, if I remember, so we'll probably want to adapt for that, and keep in mind use cases where the input fields are not necessarily attached to the handle, like in @patrickarlt screenshot above.
from calcite-design-system.
For potential future reference this is the zoom slider we are using in the vector tile style editor.
Would love to replace this with something from this repo.
from calcite-design-system.
Following Adam's comment:
The initial (basic) slider is already in 1.x.
https://esri.github.io/calcite-web/documentation/components/#sliders
For 1.x we had the basic slider, but there are more features we want to add, like notches, range, etc.
Though the concept of the low-end range handle is nice (below the slider), it proved faulty on mobile when sliding as the value is hidden by the finger. Therefore, it's best to keep the low-end range value displayed above the slider.
from calcite-design-system.
I am 100% ok with changing the design in VTSE to have the inputs attached to the handles as per the designs in #4 (comment). Not a firm requirement on our end.
from calcite-design-system.
For sure, IMO it adds unnecessary y-height because you also need to accommodate for a label above the handle, and most use cases for multi-handle sliders will likely be in more data rich / dense UI.
Maybe a prop option could allow for both options!
I have been thinking about scaling for things like this... I could see a "half" scale modifier being useful for VTSE or other really tight interfaces. Same for dropdown, etc. Could set a "scale prop" modifier on a per component basis for type and padding scale?
from calcite-design-system.
On the off-chance somebody wants to pick this up while I'm out next week my in-progress work is staged on the paulcpederson/loader branch.
from calcite-design-system.
Any further work to the slider can be opened as new issues. Closing for now.
from calcite-design-system.
Related Issues (20)
- [Carousel] Improve support for high item counts
- Replace `autoClosableRetainsCloseButton` alert screenshot test with e2e
- Split Button: No way to set href for links on the primary button
- removing a tab triggers exception HOT 2
- Tooling: Update user impact dropdown and labels HOT 2
- Action: No way to set href for links HOT 8
- Allow Navigation Logo component to be configured as non-actionable HOT 2
- Stepper Item: Status not provided to assistive technologies
- Input + Text Area: Add native `spellcheck` prop HOT 1
- Dropdown button trigger is not truncating HOT 2
- [calcite-input-number]: calcite-input-number allowing character "e" HOT 1
- Use calcite-ui-icons >= 3.27.8 HOT 2
- Update/remove tests using `HYDRATED_ATTR` in favor of `renders`
- [Input Date Picker] Multiple components with and without `range` can create buggy behavior HOT 3
- [List]: add mode prop for choosing between flat and nested lists
- [List]: update single-select icons HOT 1
- [List Item]: add icon-end/start props HOT 1
- Memory leak with adding/removing block components HOT 3
- [Carousel] Add `goTo()` and other convenience methods
- label: replace "default" value with a more meaningful value. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from calcite-design-system.