feat: support dragging range slider track to move entire range by Sushit-prog · Pull Request #8698 · marimo-team/marimo

Sushit-prog · 2026-03-16T07:35:40Z

What changed

Dragging the filled track between the two handles now moves
the entire range together, preserving the selected width.
Individual handles still work independently. No new parameters
— this is default behavior for all range sliders.

Frontend-only change in range-slider.tsx.

How it works

On pointerdown, the drag start position and value are captured
once. On pointermove, the delta is computed from that fixed
anchor and applied to both handles simultaneously. Pointer
capture ensures smooth dragging even when the cursor leaves
the element.

Testing

✅ Track drag preserves range width
✅ Individual handle drag works independently
✅ Step snapping during track drag
✅ Vertical orientation
✅ Discrete steps
✅ Boundary clamping at min/max

…e width

vercel · 2026-03-16T07:35:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Mar 20, 2026 5:07am

github-actions · 2026-03-16T07:35:52Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

for more information, see https://pre-commit.ci

Sushit-prog · 2026-03-16T12:15:17Z

I have read the CLA Document and I hereby sign the CLA

Light2Dark · 2026-03-16T13:21:02Z

I'm confused, I thought we didn't want to add a new parameter

Sushit-prog · 2026-03-16T13:43:02Z

I'm confused, I thought we didn't want to add a new parameter

Hi @Light2Dark! Thanks for the review. I understand the confusion, based on the discussion, I can update this to make dragging the middle range bar (between the two handles) always move both handles together as default behaviour, without needing the fixed_range parameter at all. Would that be the preferred approach? Happy to update the PR!

akshayka

This should not add a new argument to range_slider

manzt

From the discussion (#5240 (comment)), we just want to update the default behavior to support the range and avoid the new parameter.

for more information, see https://pre-commit.ci

Sushit-prog · 2026-03-17T11:33:57Z

Updated the PR based on feedback, removed the fixed_range parameter entirely from both Python and frontend. Middle-drag on the range bar now works as default behaviour for all range sliders, implemented as a frontend-only change in range-slider.tsx. No new Python parameters added. Dragging the blue bar between the two thumbs moves both handles together while keeping the range width constant.

Sushit-prog · 2026-03-17T13:23:10Z

The only failing backend test is test_ibis_table.py::TestTemporalColSummaries::test_time_column which appears to be a pre-existing issue with sqlglot/ibis unrelated to this PR. All other 6623 tests pass. The frontend changes are complete middle-drag on the range bar now works as default behavior with no new parameters added.

Copilot

Pull request overview

This PR updates the range slider UX so users can drag the filled track to move both handles together while keeping the selected range width constant (implemented in the frontend), and documents the behavior in the Python UI docstring.

Changes:

Implement middle-drag (filled track drag) behavior for range sliders in the frontend RangeSlider component.
Update Python range_slider docstring to document the new default interaction.
Minor cleanup in the frontend plugin component (comment/formatting).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.

File	Description
marimo/_plugins/ui/_impl/input.py	Adds a `Notes:` section documenting filled-track dragging behavior for `range_slider`.
frontend/src/plugins/impl/RangeSliderPlugin.tsx	Minor formatting/comment cleanup around props/onValueChange.
frontend/src/components/ui/range-slider.tsx	Adds pointer-driven filled-track dragging logic (range-preserving drag).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+      const trackLength = rect.height;
+      delta = -((e.clientY - dragStartY.current) / trackLength) * totalRange;
+    } else {
+      const trackLength = rect.width;


+    const rangeWidth = origRight - origLeft;
+
+    // Snap delta to step
+    const step = props.step ?? 1;


+  const handleRangePointerUp = (e: React.PointerEvent<HTMLSpanElement>) => {
+    if (!isDraggingRange.current) {
+      return;
+    }
+    isDraggingRange.current = false;
+    if (props.value && props.value.length === 2) {
+      props.onValueCommit?.(props.value);
+    }
+  };


+    isDraggingRange.current = false;
+    if (props.value && props.value.length === 2) {
+      props.onValueCommit?.(props.value);
+    }


+  const handleRangePointerMove = (e: React.PointerEvent<HTMLSpanElement>) => {
+    if (!isDraggingRange.current || !props.value || props.value.length !== 2) {
+      return;
+    }
+
+    const rootEl = rootRef.current;
+    if (!rootEl) {
+      return;
+    }
+
+    const rect = rootEl.getBoundingClientRect();
+    const isVertical = props.orientation === "vertical";
+
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const totalRange = max - min;
+
+    // Delta is always from the ORIGINAL drag start position
+    // so the movement stays proportional and doesn't drift
+    let delta: number;
+    if (isVertical) {
+      const trackLength = rect.height;
+      delta = -((e.clientY - dragStartY.current) / trackLength) * totalRange;
+    } else {
+      const trackLength = rect.width;
+      delta = ((e.clientX - dragStartX.current) / trackLength) * totalRange;
+    }
+
+    // Always use the ORIGINAL values from when drag started — never current props.value
+    const [origLeft, origRight] = dragStartValue.current;
+    const rangeWidth = origRight - origLeft;
+
+    // Snap delta to step
+    const step = props.step ?? 1;
+    const snappedDelta = Math.round(delta / step) * step;
+
+    // Clamp so neither thumb exceeds min/max
+    const clampedDelta = Math.max(
+      min - origLeft,
+      Math.min(max - origRight, snappedDelta),
+    );
+
+    const newLeft = origLeft + clampedDelta;
+    const newRight = newLeft + rangeWidth;
+
+    // Only fire if value actually changed
+    if (newLeft !== props.value[0] || newRight !== props.value[1]) {
+      props.onValueChange?.([newLeft, newRight]);
+    }


+  const mergedRef = (node: React.ElementRef<typeof SliderPrimitive.Root>) => {
+    rootRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };


+    Notes:
+        Dragging the filled track (the colored bar between the two handles)
+        moves both handles together while preserving the selected range width.
+        Individual handles can still be dragged independently to adjust the range.


dmadisetti · 2026-03-17T18:55:35Z

Thanks for iterating! A few of the copilot issues look valid. Additionally I think you can undo some of the python changes. The implementation also seems a little broken right now:

Screen.Recording.2026-03-17.at.11.51.20.AM.mov

Ping back when you have a screencast of it working! Thanks again!

- use internal currentDragValue ref independent of controlled props.value - capture trackRect once on pointerdown to avoid drift from re-renders - release pointer capture on pointerup - add stopPropagation on pointermove to prevent Radix interference - fix stale value in onValueCommit - revert unnecessary Python docstring changes # Conflicts: # frontend/src/components/ui/range-slider.tsx # marimo/_plugins/ui/_impl/input.py

Sushit-prog · 2026-03-19T18:17:20Z

Hi @dmadisetti, fixed all the issues. Here's a summary of what was addressed:

Fixed the broken drag behaviour — track drag now moves both handles
smoothly while preserving the range width consistently
Released pointer capture on pointerup
Fixed stale props.value in onValueCommit using currentDragValue ref
Captured track bounding rect once on pointerdown to prevent drift
during re-renders
Added stopPropagation on pointermove to prevent Radix interference
Converted mergedRef to useCallback
Handled props.steps array for correct step snapping
Reverted Python docstring Notes: section as suggested

Also updated the PR title to reflect the actual implementation.

fixed.mp4

dmadisetti · 2026-03-19T19:38:56Z

Super smooth! I was still able to drag when disabled though

Sushit-prog · 2026-03-19T19:48:32Z

@dmadisetti Fixed track drag is now prevented when the
slider is disabled.

dmadisetti

LGTM and functionality feels right.

It's be great if you could remove the changes you have in marimo/_plugins/ui/_impl/input.py, frontend/src/plugins/impl/RangeSliderPlugin.tsx (just whitespace but still)

Thanks! I'll let someone a little more familiar with typescript merge in case there's something I'm missing

Sushit-prog · 2026-03-20T05:08:34Z

Done! Reverted all changes in input.py and RangeSliderPlugin.tsx
back to main. Only range-slider.tsx is changed now.

github-actions · 2026-03-20T19:12:39Z

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.21.2-dev21

…o-team#8698) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

feat: add fixed_range parameter to range_slider to keep constant rang…

ddded55

…e width

Sushit-prog requested review from Light2Dark and manzt as code owners March 16, 2026 07:35

vercel Bot deployed to Preview March 16, 2026 07:36 View deployment

[pre-commit.ci] auto fixes from pre-commit.com hooks

357f9dd

for more information, see https://pre-commit.ci

vercel Bot deployed to Preview March 16, 2026 07:39 View deployment

akshayka added the api-change label Mar 16, 2026

akshayka requested review from akshayka and dmadisetti March 16, 2026 15:26

akshayka requested changes Mar 16, 2026

View reviewed changes

manzt reviewed Mar 16, 2026

View reviewed changes

feat: implement middle-drag on range slider as default behavior

957a83c

vercel Bot deployed to Preview March 17, 2026 11:25 View deployment

[pre-commit.ci] auto fixes from pre-commit.com hooks

9983191

for more information, see https://pre-commit.ci

vercel Bot deployed to Preview March 17, 2026 11:27 View deployment

Light2Dark added enhancement New feature or request and removed api-change labels Mar 17, 2026

Light2Dark requested a review from Copilot March 17, 2026 13:48

Copilot started reviewing on behalf of Light2Dark March 17, 2026 13:49 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

dmadisetti marked this pull request as draft March 17, 2026 18:55

vercel Bot deployed to Preview March 19, 2026 17:58 View deployment

Sushit-prog changed the title ~~feat: add fixed_range parameter to range_slider to keep constant range width~~ feat: support dragging range slider track to move entire range Mar 19, 2026

Sushit-prog marked this pull request as ready for review March 19, 2026 18:21

fix: use ternary and avoid non-null assertion in range-slider

2ab05ae

vercel Bot deployed to Preview March 19, 2026 18:39 View deployment

fix: avoid non-null assertion by storing steps in variable

db40700

vercel Bot deployed to Preview March 19, 2026 19:38 View deployment

fix: prevent track drag when slider is disabled

40bcbe9

vercel Bot deployed to Preview March 19, 2026 19:50 View deployment

dmadisetti previously approved these changes Mar 19, 2026

View reviewed changes

Revert to origin/main versions of RangeSliderPlugin.tsx and input.py

c9abe77

Sushit-prog dismissed dmadisetti’s stale review via c9abe77 March 20, 2026 05:06

vercel Bot deployed to Preview March 20, 2026 05:07 View deployment

dmadisetti approved these changes Mar 20, 2026

View reviewed changes

Sushit-prog requested a review from akshayka March 20, 2026 18:50

mscolnick merged commit d87972f into marimo-team:main Mar 20, 2026
24 checks passed

Sushit-prog deleted the feature/range-slider-fixed-range branch March 31, 2026 12:39

VishakBaddur pushed a commit to VishakBaddur/marimo that referenced this pull request Apr 4, 2026

feat: support dragging range slider track to move entire range (marim…

f7924c9

…o-team#8698) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Conversation

Sushit-prog commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

How it works

Testing

Uh oh!

vercel Bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sushit-prog commented Mar 16, 2026

Uh oh!

Light2Dark commented Mar 16, 2026

Uh oh!

Sushit-prog commented Mar 16, 2026

Uh oh!

akshayka left a comment

Choose a reason for hiding this comment

Uh oh!

manzt left a comment

Choose a reason for hiding this comment

Uh oh!

Sushit-prog commented Mar 17, 2026

Uh oh!

Sushit-prog commented Mar 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

dmadisetti commented Mar 17, 2026

Uh oh!

Sushit-prog commented Mar 19, 2026

Uh oh!

dmadisetti commented Mar 19, 2026

Uh oh!

Sushit-prog commented Mar 19, 2026

Uh oh!

dmadisetti left a comment

Choose a reason for hiding this comment

Uh oh!

Sushit-prog commented Mar 20, 2026

Uh oh!

Uh oh!

github-actions Bot commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Sushit-prog commented Mar 16, 2026 •

edited

Loading

vercel Bot commented Mar 16, 2026 •

edited

Loading

github-actions Bot commented Mar 16, 2026 •

edited

Loading