[docs] Inset slider experiments

[mj12albert]

Relates to https://github.com/mui/base-ui/issues/1530

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

Update: after https://github.com/mui/base-ui/pull/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~~

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

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	5fdb718e6c399d1998af961e5b89444eef28ee6a
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/68491b01d8268f0008d7f1d6
😎 Deploy Preview	https://deploy-preview-1609--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[mj12albert]

The trickiest part was getting rid of these overlapping pixels when the colors have transparency, needed to use clip-path for this

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1609

commit: 5fdb718

[mj12albert]

I think this is good to merge to the experiments, the only issue is at certain extreme zoom levels, the gap between pseudo-elements can be visible:

[mui-bot]

Bundle size report

Total Size Change: 0B^(0.00%) - Total Gzip Change: 0B^(0.00%) Files: 41 total (0 added, 0 removed, 0 changed)

Show details for 41 more bundles

@base-ui-components/react parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/accordion parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/alert-dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/checkbox-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/collapsible parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/context-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/direction-provider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/field parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/fieldset parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/form parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/input parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/menubar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/merge-props parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/meter parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/navigation-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/number-field parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/popover parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/preview-card parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/progress parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/radio parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/radio-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/scroll-area parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/select parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/separator parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/slider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/switch parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/tabs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toast parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toggle parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toggle-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/tooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/unstable-no-ssr parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/unstable-use-media-query parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/use-render parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/utils parsed: 0B^(0.00%) gzip: 0B^(0.00%) Base UI checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 5fdb718e6c399d1998af961e5b89444eef28ee6a