antd-mini

--- nav: path: /components group: title: Information Entry toc: 'content' --- # Slider You can take values within a range by moving the slider. Used to move the slider within a certain range to obtain a single or interval value. ## Introduction In `index.json` Introducing Components in ```json "usingComponents": { #if ALIPAY "ant-slider": "antd-mini/es/Slider/index" #endif #if WECHAT "ant-slider": "antd-mini/Slider/index" #endif } ``` ## Code Sample ### Basic use > By default a slider,`change` event fires when the slider value changes, `afterChange` Events and `touchend` The trigger timing is consistent. ```xml <ant-slider defaultValue="{{80}}" #if ALIPAY onChange="onChange" onAfterChange="onAfterChange" #endif #if WECHAT bindchange="onChange" bindafterchange="onAfterChange" #endif /> ``` ```js Page({ onChange(value, e) { console.log('slider changed:', value, e); }, onAfterChange(value, e) { console.log('Current Value:', value, e); #if ALIPAY my.showToast({ content: 'value: ' + value }); #endif #if WECHAT wx.showToast({ title: `value: ${value.detail}` }); #endif }, }); ``` ### Disable state ```xml <ant-slider defaultValue="{{80}}" disabled /> ``` ### Dual Slider Mode > Incoming `range` property, the dual slider mode is supported,`value` The status value type will also become an array. ```xml <ant-slider defaultValue="{{[20, 60]}}" range /> ``` ### Nodes and scales > Incoming `showTicks` property display scale, passing in `showNumber` Shows the data on the scale. ```xml <ant-slider defaultValue="{{80}}" step="{{20}}" showTicks showNumber /> ``` ### Hover Tip > Incoming `showTooltip` Property, you can display a hovering prompt when dragging. ```xml <ant-slider defaultValue="{{80}}" showTooltip /> #if ALIPAY  <ant-slider defaultValue="{{80}}" showTooltip> <view slot="tooltip" slot-scope="prop">Slot Customization:{{prop.value}}</view> </ant-slider> #endif ``` ### Controlled Mode > `value` property and `change` Events, cooperation can achieve a controlled mode. Here's the example through `ant-stepper` Component change `value` Status,`ant-slider` Components `value` States can also change together. ```xml <ant-slider min="{{0}}" max="{{100}}" value="{{value}}" #if ALIPAY onChange="handleChange" #endif #if WECHAT bindchange="handleChange" #endif /> <ant-stepper min="{{0}}" max="{{100}}" value="{{value}}" #if ALIPAY onChange="handleChange" #endif #if WECHAT bindchange="handleChange" #endif /> ``` ```js Page({ data: { value: 80, }, handleChange(value, e) { console.log('slider changed:', value, e); #if ALIPAY this.setData({ value, }); #endif #if WECHAT this.setData({ value: value.detail, }); #endif }, }); ``` ### Custom Style > `activeLineStyle`、`activeDotStyle` Property to customize the style. ```xml <ant-slider defaultValue="{{80}}" step="{{20}}" showTooltip showTicks showNumber activeLineStyle="background-color: #ff8f1f" activeDotStyle="background-color: red" > #if WECHAT  #endif #if ALIPAY <text slot="tick" slot-scope="props" >{{props.value}}°C</text > <text slot="tooltip" slot-scope="props" >{{props.value}}°C</text > <view slot="slider"> <view class="custom-slider-handler"> <ant-icon type="SmileOutline" style="color: #ff8f1f" /> </view> </view> #endif </ant-slider> ``` ### Demo Code <code src='../../demo/pages/Slider/index'></code> ## API | Property | Description | Type | Default Value | | --------------------------- | -------------------------------------------------- | ------------------------------------------------- | ------ | | activeDotClassName | Class name of selected dot | string | - | | activeLineClassName | The style of the selected line | string | - | | activeDotStyle | Select the type of dot | string | - | | activeLineStyle | The style of the selected line | string | - | | className | Class Name | string | - | | defaultValue | Initial value | number \| [number, number] | - | | disabled | Disable | boolean | false | | max | Maximum | number | 100 | | min | Minimum | number | 0 | | range | Whether it is a double slider | boolean | false | | showNumber | Show data on scale | boolean | false | | step | Step, the value must be greater than 0 and divisible by (max-min) | number | 1 | | style | Style | string | - | | showTicks | Show scale | boolean | false | | showTooltip | Whether to display the floating prompt when dragging, support the use of scope slot customization | boolean | false | | slider | Custom Slider | slot | - | | tick | Custom Scale | slot | - | | tooltip | Show hover prompt when custom drag | slot | - | | value | Current Value | number \| [number, number] | - | | #if ALIPAY onChange | Triggers when the slider value changes | (value: number | [number, number]) => void | - | | #if ALIPAY onAfterChange | Consistent with the touchend trigger timing, the current value is passed in as a parameter. | (value: number | [number, number]) => void | - | | #if WECHAT bindchange | Triggers when the slider value changes | (value: number | [number, number]) => void | - | | #if WECHAT bindafterchange | Consistent with the touchend trigger timing, the current value is passed in as a parameter. | (value: number | [number, number]) => void | - | ### Theme customization #### Style Variables Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components. | Variable name | Default Value | Dark Mode Default | Remarks | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------- | | --slide-block-shadow | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.12); color: #ffffff;">rgba(0, 0, 0, 0.12)</div> | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.12); color: #ffffff;">rgba(0, 0, 0, 0.12)</div> | Slider Block Shadow | | --slider-default-primary-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | Slider default main color | | --slider-track-bg | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | Slider track background color | | --slider-fill-bg | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">#f5f5f5</div> | <div style="width: 150px; height: 30px; background-color: #121212; color: #ffffff;">#121212</div> | Slider Fill Background Color | | --slider-number-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | Slider number color | | --slide-block-bg | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | Slider block background color | | --slide-back-bg | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">#f5f5f5</div> | <div style="width: 150px; height: 30px; background-color: #121212; color: #ffffff;">#121212</div> | Slider Background Color |