Slider Component
This component is generally used in forms, for scenarios where the user manually selects a value within a range.
📌 Platform Compatibility
| APP(vue) | H5 | WeChat Mini Program | Alipay Mini Program |
|---|---|---|---|
| ✔ | ✔ | ✔ | ✔ |
🏯 Basic Usage
html
<!-- Global usage -->
<hy-slider v-model="value"></hy-slider>ts
import { ref } from 'vue';
const value = ref(30);Setting the Maximum and Minimum Values
With min and max, you can set the maximum and minimum values selectable by the slider
html
<template>
<hy-slider v-model="value" min="30" max="80"></hy-slider>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(30);
</script>Setting the Step Value
Note
Note that the step must be evenly divisible by the max value; otherwise, the slider may be unable to slide all the way to the maximum value.
html
<template>
<hy-slider v-model="value" step="20"></hy-slider>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(30);
</script>Using in Containers That Are Initially Hidden, Such as Popups
Note
Note that in this scenario, you should also add a v-if to the slider so that it renders only when the popup is shown; only then can the correct size of the slider be calculated.
html
<template>
<hy-popup v-model:show="popupShow">
<view class="slot-content" style="width: 100%">
<hy-slider v-if="popupShow" v-model="sliderValue" min="1" max="4" showValue></hy-slider>
</view>
</hy-popup>
<hy-button type="primary" @click="popupShow = !popupShow" text="Open Popup"></hy-button>
</template>
<script setup>
import { ref } from 'vue';
const popupShow = ref(false);
const sliderValue = ref(4);
</script>Disabled State
html
<template>
<hy-slider v-model="value" disabled></hy-slider>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(30);
</script>Custom Slider Block
html
<template>
<hy-slider v-model="value">
<template #default>
<view>
<svg
t="1722094047017"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="11063"
width="32"
height="32"
>
<path
d="M965.12 469.333333c-81.493333-90.88-230.186667-149.333333-378.453333-149.333333h-6.826667a193.28 193.28 0 0 0-289.493333-109.226667 188.373333 188.373333 0 0 0-51.2 47.36 42.666667 42.666667 0 0 0-2.773334 45.653334 42.666667 42.666667 0 0 0 42.666667 21.333333A149.333333 149.333333 0 0 1 384 355.626667l-16.426667 6.4A42.666667 42.666667 0 0 0 341.333333 401.28v221.44A42.666667 42.666667 0 0 0 367.36 661.333333l16.64 7.466667a150.4 150.4 0 0 1-106.666667 30.506667 42.666667 42.666667 0 0 0-42.666666 21.333333 42.666667 42.666667 0 0 0 2.773333 45.866667 187.946667 187.946667 0 0 0 51.2 47.36 194.56 194.56 0 0 0 103.893333 29.653333A192 192 0 0 0 580.053333 704h6.613334c149.333333 0 296.96-58.666667 378.453333-149.333333a64 64 0 0 0 0-85.333334z m-535.68-130.773333a192 192 0 0 0-155.946667-55.04 146.133333 146.133333 0 0 1 39.68-36.693333 152.533333 152.533333 0 0 1 176.213334 10.24 149.333333 149.333333 0 0 1 46.293333 65.28 615.04 615.04 0 0 0-104.746667 18.346666 20.053333 20.053333 0 0 0-1.493333-2.133333zM489.173333 768a152.32 152.32 0 0 1-176.213333 10.24 135.893333 135.893333 0 0 1-38.826667-36.266667 192 192 0 0 0 155.093334-55.466666 21.333333 21.333333 0 0 0 2.133333-3.84 615.466667 615.466667 0 0 0 104.533333 18.346666A149.333333 149.333333 0 0 1 489.173333 768z m444.16-242.133333C859.52 608.213333 723.413333 661.333333 586.666667 661.333333a546.773333 546.773333 0 0 1-202.666667-38.613333V401.28A549.76 549.76 0 0 1 586.666667 362.666667c136.746667 0 272.853333 53.12 346.666666 135.466666a21.333333 21.333333 0 0 1 0 27.733334z"
fill="#CE4141"
p-id="11064"
></path>
<path
d="M682.666667 426.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 128a42.666667 42.666667 0 1 1 42.666666-42.666667 42.666667 42.666667 0 0 1-42.666666 42.666667zM128 448h149.333333a21.333333 21.333333 0 0 0 0-42.666667H128a21.333333 21.333333 0 0 0 0 42.666667zM298.666667 597.333333a21.333333 21.333333 0 0 0-21.333334-21.333333H192a21.333333 21.333333 0 0 0 0 42.666667h85.333333a21.333333 21.333333 0 0 0 21.333334-21.333334zM298.666667 512a21.333333 21.333333 0 0 0-21.333334-21.333333H64a21.333333 21.333333 0 0 0 0 42.666666h213.333333a21.333333 21.333333 0 0 0 21.333334-21.333333z"
fill="#CE4141"
p-id="11065"
></path>
<path
d="M448 426.666667m-21.333333 0a21.333333 21.333333 0 1 0 42.666666 0 21.333333 21.333333 0 1 0-42.666666 0Z"
fill="#CE4141"
p-id="11066"
></path>
<path
d="M448 512m-21.333333 0a21.333333 21.333333 0 1 0 42.666666 0 21.333333 21.333333 0 1 0-42.666666 0Z"
fill="#CE4141"
p-id="11067"
></path>
<path
d="M448 597.333333m-21.333333 0a21.333333 21.333333 0 1 0 42.666666 0 21.333333 21.333333 0 1 0-42.666666 0Z"
fill="#CE4141"
p-id="11068"
></path>
</svg>
</view>
</template>
</hy-slider>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(30);
</script>Range Selection
html
<template>
<hy-slider isRange showValue v-model:rangeValue="value"></hy-slider>
</template>
<script setup>
import { ref } from 'vue';
const value = ref([20, 80]);
</script>Customizing the Overall Style of the Slider
- Use inactive-color to configure the background color of the track
- Use active-color to configure the background color of the selected portion
- Use block-width to configure the width of the slider block (height equals width)
- Use block-color to configure the color of the slider button
- Use height to configure the height of the slider bar, in rpx
html
<template>
<hy-slider v-model="value" inactive-color="red"></hy-slider>
<hy-slider v-model="value" active-color="red"></hy-slider>
<hy-slider v-model="value" :block-width="10"></hy-slider>
<hy-slider v-model="value" block-color="red"></hy-slider>
<hy-slider v-model="value" :height="4"></hy-slider>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(30);
</script>API
Slider Props
| Parameter | Description | Type | Default |
|---|---|---|---|
| v-model | Two-way binding of the slider value | number | 0 |
| blockSize | Size of the slider block | number | 18 |
| min | Minimum selectable value | number | 1 |
| max | Maximum selectable value | number | 100 |
| step | Step size of the selection | number | 1 |
| activeColor | Color of the active portion of the progress bar | string | - |
| inactiveColor | Background color of the progress bar | string | - |
| blockColor | Background color of the slider block | string | - |
| showValue | Whether to display the current value | boolean | false |
| blockStyle | Custom style of the slider button, in object form | CSSProperties | - |
| height | Height of the progress bar, default unit px for values | string | number | 2px |
| isRange | Enable dual-slider mode | boolean | false |
| useNative | Whether to render the uni-app framework's built-in component | boolean | false |
| rangeValue | Two-way binding value for dual sliders, in array form | array | [0, 0] |
| customStyle | Define external styles to be applied | CSSProperties | - |
Events
| Event Name | Description | Callback Parameter |
|---|---|---|
| changing | Triggered event (during dragging) | value: current value |
| change | Triggered event | value: current value |
| start | Slide start | value: current value |
CSS Variables
| Variable | Description | Default |
|---|---|---|
--hy-slider-range-font-size | Font size of the range numbers | 12px |
--hy-slider-button-size | Slider block size | 24px |
--hy-slider-button-box-shadow | Slider block shadow | 0 1px 2px rgba(0, 0, 0, 0.5) |
--hy-slider-track-radius | Track border radius | Follows --hy-radius-semicircle (100px) |
