Slider Component Reference

    Click the Add Component button at the bottom of the Inspector panel and select UI/Slider to add the Slider component to the node.

    To use , please refer to the Slider API documentation and the scene of the test-cases-3d project.

    For event structure you can refer to the Button documentation.

    The Slider event callback has two parameters, the first one is the Slider itself and the second is the customEventData.

    The Slider is usually used to adjust the value of the UI (for example, volume adjustment), and its main component is a slider button, which is used for user interaction. You can adjust the value of the Slider through this part.

    slider-hierarchy

    The event callback added by this method is the same as the event callback added by the editor, all added by code. First you need to construct a EventHandler object, and then set the corresponding target, component, handler and customEventData parameters.

    Method two

    By slider.node.on('slide', ...) way to add.

    1. // Suppose we add event handling callbacks to the onLoad method of a component and perform event handling in the callback function
    2. import { _decorator, Component, Slider } from 'cc';
    3. const { ccclass, property } = _decorator;
    5. @ccclass("example")
    6. export class example extends Component {
    8.     @property(Slider)
    10.     onLoad () {
    11.        this.slider!.node.on('slide', this.callback, this);
    12.     }
    14.     callback(slider: Slider) {
    15.         // The parameter of the callback is the Slider component. Note that events registered this way cannot pass "customEventData"
    16. }