Skip to content

[docs] Inset slider experiments #1609

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Mar 27, 2025

Relates to #1530

Demo: https://deploy-preview-1609--base-ui.netlify.app/experiments/slider/inset

Update: after #1661 pseudo-elements are no longer necessary for functionality, one is needed to visually extend the indicator a bit

It's possible with the current API though a bit tricky:

  • Put Control inside Track, instead of track inside control as documented; this doesn't affect any functionality since track is just a plain div

  • Add semi-circular pseudo-elements to Control to extend the hitbox

  • Add semi-circular pseudo-elements to the Track so borders can wrap around them

  • To put a border around the whole thing, use box-shadow to apply top/bottom borders to the track, and borders around 3 sides of the Tracks pseudo-elements

  • I have followed (at least) the PR section of the contributing guide.

@mj12albert mj12albert added the component: slider This is the name of the generic UI component, not the React module! label Mar 27, 2025
Copy link

netlify bot commented Mar 27, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit bd0aff2
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/67fdfb9463434400086e61cf
😎 Deploy Preview https://deploy-preview-1609--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@mj12albert

This comment was marked as outdated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: slider This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant