All Products
Search
Document Center

Mobile Platform as a Service:slider

Last Updated:Jul 27, 2023

This topic describes the scroll selector, that is, slider.

Attribute

Type

Default value

Description

Minimum version

name

String

-

The component name, which is used to submit the form to obtain data.

-

min

Number

0

The minimum value.

-

max

Number

100

The maximum value.

-

step

Number

1

The step size, whose value must be greater than 0 and can be divisible by (max-min).

-

disabled

Boolean

false

Whether to disable the button.

-

value

Number

0

The current value.

-

show-value

Boolean

false

Whether to display the current value.

-

active-color

String

#108ee9

The selected color.

-

background-color

String

#ddd

The color of the background bar.

-

track-size

Number

4

The height of the track line, in px.

-

handle-size

Number

22

The height of the track line, in px.

-

handle-color

String

#fff

The filling color of the slider.

-

onChange

EventHandle

-

Trigger when a drag is completed, where event.detail = {value: value}.

-

onChanging

EventHandle

-

The event triggered during the drag, where event.detail = {value: value}.

1.5.0

Code sample

<view class="section section-gap">
  <text class="section-title">Set step.</text>
  <view class="body-view">
    <slider value="60" onChange="sliderChange" step="5"/>
  </view>
</view>

<view class="section section-gap">
  <text class="section-title">Display the current value.</text>
  <view class="body-view">
    <slider value="50" show-value/>
  </view>
</view>

<view class="section section-gap">
  <text class="section-title">Set the minimum or maximum value.</text>
  <view class="body-view">
    <slider value="100" min="50" max="200" show-value/>
  </view>
</view>

<view class="page-section">
  <view class="page-section-title">The custom style.</view>
  <view class="page-section-demo">
    <slider value="33" onChange="slider4change" min="25" max="50" show-value
    backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
  </view>
</view>
Page({
  sliderChange(e) 
    console.log('The changed slider value:', e.detail.value)
})