palantir/blueprint

Slider Handle goes out of bounds when provided values lower/higher than min/max

Open

#4,285 建立於 2020年8月18日

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (20,263 star) (2,167 fork)batch import
P3Package: coreType: bughelp wanted

描述

Environment

  • Package version(s): 3.25.0
  • Operating System: Ubuntu 18.04
  • Browser name and version: Chrome 84

Code Sandbox

sandbox

Steps to reproduce

  1. Create a slider (also works for multislider)
  2. Provide min/max props
  3. Set the value to be greater than max value

Actual behavior

The handle goes out of bounds and floats to the side

Expected behavior

Should filter the value under the hood

Possible solution

.filter(value => value > min] && value < max) under the hood

This specifically came up because I'm trying to sync a slider with a d3 graph which zooms. I think everything works pretty nicely except for this out of bounds issue. I understand that this wouldn't happen under normal use of the slider where you would only be able to set the value prop of the slider by dragging and setting on the slider, but I also don't think this would be difficult/performance heavy.

貢獻者指南

技術棧
typescriptreact
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
2
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
under 1 hour
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
Basic React and TypeScriptFamiliarity with Blueprint's Slider component
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
80
研究方向
The issue is a simple clamping bug in the Slider component. The fix involves ensuring the value prop is clamped within min and max bounds. Look for the Slider component source file (likely in packages/core/src/components/slider/) and add a filter or clamp function to ensure the value stays within [min, max]. The possible solution suggests using .filter() but since it's a single value, a clamp function like Math.min(max, Math.max(min, value)) would be appropriate. Test the change with the provided sandbox steps.