Comments (5)
cc @samanpwbb , I'd be curious to hear your thoughts on ☝️ if you have any feedback!
Oh, I'm glad you dug into this. From these videos, I think the best move is probably to only slightly adjust the style of the range input, based on figma styleguide, rather than totally redesign it. I think the main change is to make the drag handle border 1px rather than 2px.
We should also look into an active state while you're doing this (#889)
from assembly.
@tristen made a good suggestion -- we could update the cursor to be a pointer instead of default cursor when it is within the existing clickable container div area, to make it clearer that a user can successfully click off of the track itself to change the thumb position.
from assembly.
Looking into this further, it seems like I am able to move the range thumb by clicking anywhere inside the parent container, i.e. not directly on the track itself. It's not the clearest in the below screen recording, but you can notice how the thumb responds to clicks within the container div even if the cursor doesn't change to a pointer (which happens when directly on the range track line).
Screen.Recording.2021-04-09.at.2.55.28.PM.mov
So, should we consider making the parent container larger (which would affect the height of the element)?
Extending the clickable area beyond the height of the range thumb itself when there are no visible boundaries around the target area starts to feel a bit unexpected to me, especially when considering the element's use in smaller spaces.
From discussion earlier this week, it sounds like we're in favor of sticking with the line-based track design rather than something with boundaries, like:
tl;dr, if we're not going to move away from a line track to a visually bordered track space, I wonder if the current behavior actually makes the most sense given the track design?
from assembly.
cc @samanpwbb , I'd be curious to hear your thoughts on ☝️ if you have any feedback!
from assembly.
I think the main change is to make the drag handle border 1px rather than 2px.
Sounds good, thanks for taking a look!
We should also look into an active state while you're doing this (#889)
Agreed, I'll go ahead and open a PR for these changes to the range input.
from assembly.
Related Issues (20)
- Icon for boolean
- 1.0.0 migration guide
- Switch handles are not perfect circles
- loading--dark modifier not working as expected HOT 1
- css and js CDN addresses are 404 HOT 1
- Remove `flex-grow` from `.col` HOT 1
- assembly.min.css missing `border-top-color` in `.loading--dark` HOT 1
- Add `flex-basis: 0;` to col--auto
- Create ESLint plugin for using Assembly with React HOT 1
- Consider setting color-scheme to opt-out of Chrome Auto Dark Themes HOT 1
- Dependency on specific npm Version
- Do we need to resolve custom properties? HOT 1
- Make it easier to style borderless select elements HOT 3
- Remove `btn--stroked--2` and `select--stroked--2`? HOT 1
- Rework color variants in order to reduce file size HOT 1
- Implement gutter classes with CSS grid instead of using margin/padding hacks HOT 2
- Can we deprecate flex-child?
- Future of the flex-child rule? HOT 3
- Improve focus states for text inputs and textareas
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 assembly.