滑动条
版本：^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 在不同滑块之间切换焦点。
查看 Slider 文档以获取更多示例和完整的 API 参考。
