# slider_arkui

**Repository Path**: changsanjiang/slider_arkui

## Basic Information

- **Project Name**: slider_arkui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-07-01
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Slider for ArkUI

一个滑动组件, 支持水平滑动和垂直滑动, 提供自定义轨道、轨迹、滑块和标记点的能力. 适用于音频播放、视频进度、参数调节等场景.

## ✨ 特性

* 可水平滑动和垂直滑动(axis)
* 可自定义轨道(track)
* 可自定义轨迹(trace)
* 可自定义滑块(thumb)
* 可添加自定义标记点(markers)

---

## ✅ 示例效果

![](snapshot.jpg)

---

## 📦 安装
```shell
ohpm i @sj/slider
```

---

## 🧩 在项目中引用

请在需要依赖的模块找到 oh-package.json5 文件, 新增如下依赖, 执行同步后等待安装完成;
```json
{
  "dependencies": {
    "@sj/slider": "^1.0.4"
  }
}
```

---

## 🚀 使用方法

```ts
import { CustomSlider } from '@sj/slider';

@ComponentV2
struct SliderDemo {
  @Local private mValue: number = 0.0;
  @Local private mMaxValue: number = 1.0;
  @Local private mMinValue: number = 0.0;

  build() {
    CustomSlider({
      value: this.mValue,
      maxValue: this.mMaxValue,
      minValue: this.mMinValue,
      onChangeValue: (value, changeSource) => {
        switch (changeSource) {
          /** 通过滑动手势改变值 */
          case CustomSliderChangeValueSource.Drag:
            this.mValue = value;
            break;
          /** 通过点击轨道改变值 */
          case CustomSliderChangeValueSource.Tap: {
            this.getUIContext().animateTo({ curve: 'linear', duration: 150 }, () => { // 添加属性动画
              this.mValue = value;  
            });
          }
            break;
        }
      },
    })
    .padding({ left: 12, right: 12 })
    .width('100%')
    .height(32)
  }
}
```