## addRange('name值', '标题' [, '提示', '默认值', '参数', '额外属性', '额外css类']) 标识符:`range` | 参数 | 含义 | 类型 | | --- | --- | --- | | name | name值 | string | | title | 标题 | string | | tips | 提示 | string | | default | 默认值 | string | | options | 参数 | array | | extra_attr | 额外属性 | string | | extra_class | 额外css类 | string | ~~~ return ZBuilder::make('form') ->addRange('test1', '默认范围(10-100)') ->fetch(); ~~~ ![](https://box.kancloud.cn/8efca14135cd40d3d45bc09c8c24b70c_1172x94.png) ### 默认值 默认范围是10到100,初始值为10,也可以设置一个初始默认值。 ~~~ return ZBuilder::make('form') ->addRange('test1', '默认范围(10-100)', '', 45) ->fetch(); ~~~ ![](https://box.kancloud.cn/2a31868f07d6ff7b2db70d05ded7433d_1165x86.png) >[danger] 注意,如果是两个值 ### 参数 `addRange`方法支持定义33个不同的参数,包含了[Range Sliders](https://github.com/IonDen/ion.rangeSlider)绝大部分的参数,详细参数可以参考[Range Sliders](https://github.com/IonDen/ion.rangeSlider)官方网站。 下面演示一些常用参数 * **设置最小最大值** ~~~ ->addRange('test2', '最小最大值', '', 100, ['min' => 50, 'max' => 999]) ~~~ ![](https://box.kancloud.cn/3698d4b71e118002aeb989e279fae087_1170x86.png) * **设置网格** ~~~ ->addRange('test3', '网格', '', 50, ['grid' => 'true']) ~~~ ![](https://box.kancloud.cn/45b99f447c2d752c9c3a9c5d884c68b7_1173x121.png) * **设置范围** 如果要设置两个值,需要将参数`double`设为`true` ~~~ ->addRange('test4', '两个值', '', '', ['double' => 'true', 'from' => 40, 'to' => 80]) ~~~ ![](https://box.kancloud.cn/12a9cb2b78ad89ba69526e88ef2f153c_1164x84.png) 其中,`from`和`to`参数是取值范围,也可以写到默认值,两个值之间用`;`隔开。 ~~~ ->addRange('test4', '两个值', '', '40;80', ['double' => 'true']) ~~~ 如果希望两个值之间的分割符为逗号,可以设置`input_values_separator`参数。 ~~~ ->addRange('test4', '两个值', '', '40,80', ['double' => 'true', 'input_values_separator' => ',']) ~~~ 这时候,默认值的两个值就要用`,`隔开,而不是用`;`隔开。 * **设置负值** ~~~ ->addRange('test5', '设置负值', '', 800, ['min' => -500, 'max' => 999]) ~~~ ![](https://box.kancloud.cn/75d08d4223cb43288bf1f1823fb0dc44_1164x90.png) * **设置步进值和显示网格** ~~~ ->addRange('test6', '设置步进值', '', 300, ['grid' => 'true', 'min' => 100, 'max' => 900, 'step' => 100]) ~~~ ![](https://box.kancloud.cn/b676bff7a11222fe743c3164307ebee2_1176x123.png) 以上设置了步进值为100,也就是每移动一次增加或减少100。 * **自定义** 还可以自定义内容,比如定义为月份。 ~~~ ->addRange('test7', '自定义', '', 5, ['grid' => 'true', 'values' => '一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月']) ~~~ ![](https://box.kancloud.cn/2c6fb3c83113459b7da3cb1d92e76d4d_1180x120.png) 其中,默认值5表示数据的第6位,也就是“六月”,它表示下标,数据的下标从0开始。 * **前缀** ~~~ ->addRange('test8', '前缀', '', '', ['grid' => 'true', 'min' => 1000, 'max' => 10000, 'from' => 2500, 'prefix' => '$']) ~~~ ![](https://box.kancloud.cn/56aa8b5ff2c6cf30e29668a0d2e8b5f3_1175x113.png) 更多的设置方法,请大家参考[Range Sliders](https://github.com/IonDen/ion.rangeSlider)的文档,自由发挥。