滑桿

滑桿允許使用者在範圍內選取一個或多個值。

安裝

上述命令僅適用於個別安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

導入

用法

已停用

尺寸

圓角

顏色

垂直滑桿

可以使用 orientation="vertical" 屬性來變更滑桿的方向。

帶有可見步進

您可以使用 showSteps 屬性在每個步進上顯示小點。

帶有標記

您可以使用 marks 屬性在每個步進上顯示標籤。

範圍滑桿

如果您將數值陣列傳遞給 value 屬性或 defaultValue 屬性，滑桿將會變成範圍滑桿。

填充偏移量

fillOffset 屬性可讓您設定填充的起始位置。

帶有工具提示

當使用者懸停或拖曳滑桿時，showTooltip 屬性可讓您顯示帶有目前滑桿值的工具提示。

注意： 您可以透過將 tooltipProps 傳遞至 Slider 元件來變更任何工具提示屬性。

帶有外框

透過傳遞 showOutline 屬性，可以為滑桿的滑塊新增一個小的外框。

開始 & 結束內容

滑桿元件提供 startContent 和 endContent 屬性，可讓您在滑桿的開始和結束位置新增任何 ReactNode。

數值格式化

數值預設會格式化為百分比，但可以使用 formatOptions 屬性指定不同的格式來修改。formatOptions 與 Intl.NumberFormat 的選項參數相容，並會根據目前的地區設定套用。

注意： 使用 tooltipValueFormatOptions 屬性來格式化工具提示數值。

也可以使用 getValue 屬性來格式化數值。

隱藏數值

滑桿數值預設會顯示，但可以透過傳遞 hideValue 屬性來隱藏。

隱藏滑塊

滑桿滑塊預設會顯示，但可以透過傳遞 hideThumb 屬性來隱藏。

受控模式

您可以透過傳遞 value 和 onChange 屬性來控制滑桿。

如果您希望僅在使用者停止拖曳滑塊時才擷取滑桿數值，可以使用 onChangeEnd 屬性。

受控範圍

您也可以透過在 value 和 onChange 屬性中使用數值陣列來控制範圍滑桿。

自訂滑塊

滑桿元件提供 renderThumb 屬性，可讓您以任何您想要的方式自訂滑塊。

自訂範圍滑塊

您也可以使用 renderThumb 屬性來自訂範圍滑桿的滑塊。index 屬性會告訴您目前正在渲染哪個滑塊。

自訂標籤

滑桿（Slider）元件提供一個 renderLabel 屬性，讓您可以自訂標籤的顯示方式。

自訂數值

滑桿（Slider）元件提供一個 renderValue 屬性，讓您可以自訂數值標籤元素的顯示方式。

停用滑桿縮放動畫

如果您想停用滑桿縮放動畫，可以傳遞 disableThumbScale 屬性。

插槽（Slots）

• base：基礎插槽，包含所有其他插槽和元素。它作為主要容器。
• labelWrapper：滑桿的標籤和數值的容器。它對齊這些元素並確保一致的佈局。
• label：用於顯示滑桿標籤的專用插槽。
• value：顯示滑桿的目前數值。位於 labelWrapper 內。
• step：表示滑桿上的個別步驟或間隔。
• mark：表示滑桿上的特定數值或間隔。
• trackWrapper：滑桿軌道的容器，確保其一致對齊和定位。
• track：滑桿的基準條，滑桿控制鈕沿其移動。
• filler：所選數值的視覺呈現，從起點到目前的滑桿控制鈕位置填充軌道。
• thumb：使用者沿著軌道拖曳以選擇滑桿數值的互動式元素。
• startContent：用於滑桿開頭的額外內容或圖示的插槽。
• endContent：用於滑桿結尾的額外內容或圖示的插槽。

自訂樣式

您可以將自訂 Tailwind CSS 類別傳遞到元件插槽，來自訂 Slider 元件。

資料屬性（Data Attributes）

Slider 具有下列屬性

• data-hover：當滑桿處於懸停狀態時。基於 useHover
• data-orientation：滑桿的方向。基於 orientation 屬性。

Thumbs 具有下列屬性，這些屬性由 renderThumb 屬性返回

• data-dragging：當滑桿控制鈕被拖曳時。
• data-focus-visible：當滑桿控制鈕處於焦點時。基於 useFocusVisible
• data-hover：當滑桿控制鈕處於懸停狀態時。基於 useHover
• data-pressed：當滑桿控制鈕被按下時。基於 usePress

無障礙功能（Accessibility）

• 支援一個或多個滑桿控制鈕。
• 透過 useMove hook 支援滑鼠、觸控和鍵盤操作。
• 支援多點觸控，可同時拖曳多個滑桿控制鈕或多個滑桿。
• 按下軌道會將最近的滑桿控制鈕移動到該位置。
• 支援使用方向鍵，以及上/下頁、Home 和 End 鍵。
• 支援水平和垂直方向。
• 支援自訂最小值、最大值和步進值，並處理捨入錯誤。
• 支援停用整個滑桿或個別的滑桿控制鈕。
• 防止拖曳時選取文字。
• 透過 ARIA 以滑桿元素群組的形式暴露給輔助技術。
• 滑桿控制鈕使用隱藏的原生輸入元素來支援觸控螢幕閱讀器。
• 支援標示整個滑桿和個別的滑桿控制鈕。
• 支援使用 <output> 元素顯示目前的滑桿控制鈕數值。
• 將數字格式化為百分比或值的國際化格式。
• 支援在 RTL 語言環境中鏡像。

API

滑桿屬性（Slider Props）

滑桿函式

滑桿事件

類型

滑桿值

滑桿步驟刻度標記