MiniRangeSlider

MiniRangeSlider is a small, lightweight slider component for Alipay mini programs that allows users to select a range of values within a specified minimum and maximum range. It features a customizable design and a variety of callback functions that can be used to interact with the slider.

Installation

You can install MiniRangeSlider via npm:

npm install mini-range-slider

Usage

To use Mini Range Slider, simply import the component and add it to your page:

<mini-range-slider
  trackWidth="{{400}}"
  handleSize="{{24}}"
  trackSize="{{6}}"
  min="{{0}}"
  max="{{100}}"
  backgroundColor="{{'#EAEAEA'}}"
  activeColor="{{'#3880FF'}}"
  onFromCallback="{{onFromCallback}}"
  onToCallback="{{onToCallback}}"
/>

Properties

| Property | Type | Default | Description | | --------------- | -------- | --------- | ------------------------------------------ | | trackWidth | Number | 0 | The width of the slider track. | | handleSize | Number | 18 | The size of the slider handles. | | trackSize | Number | 3 | The size of the slider track. | | min | Number | 0 | The minimum value of the slider. | | max | Number | 100 | The maximum value of the slider. | | backgroundColor | String | lightblue | The background color of the slider track. | | activeColor | String | blue | The active color of the slider track. | | onFromCallback | Function | null | The callback function for the from handle. | | onToCallback | Function | null | The callback function for the to handle. |

License

MiniRangeSlider is licensed under the GNU General Public License v3.0. See the LICENSE file for more details.

Credits

MiniRangeSlider was created by Abraham Yonas. You can find me on GitHub.