FluxUI 中文网 · 官方 Livewire UI 库

版本：^2.8.0

无论是搭建价格筛选、调节设置，还是选择一个数值区间，滑块几乎适用于各种界面。现在，Flux 自带了一个功能完备的 Slider 组件。
下面一起来看看。

<flux:slider wire:model="employees" />

范围选择

需要选择一个区间而不是单个值？添加 range 属性即可获得两个滑块——非常适合价格区间、日期区间或任意最小值/最大值过滤场景。

<flux:slider range wire:model="budget" />

在你的 Livewire 组件中绑定到一个数组，这两个数值会实时更新：

public array $range = [200, 800];

精细控制

通过 min、max、step 和 min-steps-between 精确配置滑块行为：

<flux:slider
    range
    min="0"
    max="1000"
    step="10"
    min-steps-between="10"
/>

min-steps-between 属性会确保范围滑块的两个滑块之间始终保持最小间距——比如当 step 为 10 且 min-steps-between 为 10 时，两个滑块之间的距离始终至少为 100 个单位。

视觉刻度

在滑块下方添加刻度，帮助用户理解步长和数值。你可以展示简单的刻度线、数字，或自定义标签：

<!-- 简单刻度线 -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i" />
    @endforeach
</flux:slider>

<!-- 带数字 -->
<flux:slider min="1" max="5">
    @foreach (range(1, 5) as $i)
        <flux:slider.tick :value="$i">{{ $i }}</flux:slider.tick>
    @endforeach
</flux:slider>

<!-- 自定义标签 -->
<flux:slider min="1" max="5">
    <flux:slider.tick value="1">Low</flux:slider.tick>
    <flux:slider.tick value="3">Mid</flux:slider.tick>
    <flux:slider.tick value="5">High</flux:slider.tick>
</flux:slider>

自定义样式

使用 track:class 和 thumb:class 自由定制样式。想要更厚实一点的滑块？没问题：

<flux:slider track:class="h-3 bg-blue-600" thumb:class="size-5" />

这些属性在保持完整功能的同时，给你充分的外观控制能力。

那些重要的细节

我们在这个组件上非常用心，希望你能感受到这些打磨。

偏移鼠标跟踪：当你点击并拖动滑块时，不会把滑块中心强行对齐到鼠标位置——这让你在微调（比如只移动一两个步长）时感觉更加自然、精确。
智能滑块行为：在范围模式下，两个滑块不会交叉并导致区间反转。右侧滑块在它们靠得很近时会始终保持在上方，避免搞混哪个是哪个。
大步长：按住 Shift 再用方向键，可以通过 big-step 属性按更大的增量跳动——非常适合在大范围内快速移动。

可访问性

当然，我们也投入了大量精力，确保这个组件在键盘导航、焦点指示以及合适的 ARIA 标签方面都符合预期，让依赖屏幕阅读器的用户也能顺畅使用。方向键可以调节数值，在范围滑块中你可以通过 Tab 在不同滑块之间切换焦点。