azir-slider v1.0.1

Azir Framwork : https://azir.io/docs

Slider

An advance slider component that should render nicely on any platform. Supports a great level of customization.

Installation

to install the latest version of azir-slider you only need to run:

npm install azir-slider  --save

or

yarn add azir-slider

Examples

Basic :

import Slider from "azir-slider";
---
<Slider
  value={30}
  step={10}
  minimumValue={0}
  maximumValue={100}
  onStart={value => console.log(value)}
  onChange={value => console.log(value)}
  onComplete={value => console.log(value)}
  trackColor="red"
  thumbColor="blue"
  progressTrackColor="green"
  thumbSize={50}
  trackSize={30}
/>

With Custom Icon :

import Slider from "azir-slider";
---
<Slider
  icon={<Icon size={20} color="red"></Icon>}
  humbColor="black"
  trackColor="black"
  progressTrackColor="red"
/>

Style1 :

import Slider from "azir-slider";
---
  <Slider trackStyle={styles.track} thumbStyle={styles.thumb} />
---
const styles = StyleSheet.create({
  track: {
    height: 14,
    borderRadius: 2,
    backgroundColor: "white",
    borderColor: "#9a9a9a",
    borderWidth: 1
  },
  thumb: {
    width: 20,
    height: 20,
    borderRadius: 2,
    backgroundColor: "#eaeaea",
    borderColor: "#9a9a9a",
    borderWidth: 1
  }
});

Style2 :

import Slider from "azir-slider";
---
  <Slider progressTrackColor="#30a935" trackStyle={styles.track} thumbStyle={styles.thumb} />
---
const styles = StyleSheet.create({
 track: {
    height: 4,
    borderRadius: 2
  },
  thumb: {
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: "white",
    borderColor: "#30a935",
    borderWidth: 2
  }
});

Style3 :

import Slider from "azir-slider";
---
  <Slider progressTrackColor="#eb6e1b" trackStyle={styles.track} thumbStyle={styles.thumb} />
---
const styles = StyleSheet.create({
 track: {
    height: 10,
    borderRadius: 5,
    backgroundColor: "#d0d0d0"
  },
  thumb: {
    width: 10,
    height: 30,
    borderRadius: 5,
    backgroundColor: "#eb6e1b"
  }
});

Style4 :

import Slider from "azir-slider";
---
  <Slider progressTrackColor="#a4126e" trackStyle={styles.track} thumbStyle={styles.thumb} />
---
const styles = StyleSheet.create({
 track: {
    height: 10,
    borderRadius: 4,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: { width: 0, height: 1 },
    shadowRadius: 1,
    shadowOpacity: 0.15
  },
  thumb: {
    width: 20,
    height: 20,
    backgroundColor: "#f8a1d6",
    borderColor: "#a4126e",
    borderWidth: 5,
    borderRadius: 10,
    shadowColor: "black",
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 2,
    shadowOpacity: 0.35
  },
});

Style5 :

import Slider from "azir-slider";
---
  <Slider progressTrackColor="#303030" trackStyle={styles.track} thumbStyle={styles.thumb} />
---
const styles = StyleSheet.create({
  track: {
    height: 1,
    backgroundColor: "#303030"
  },
  thumb: {
    width: 30,
    height: 30,
    backgroundColor: "rgba(150, 150, 150, 0.3)",
    borderColor: "rgba(150, 150, 150, 0.6)",
    borderWidth: 14,
    borderRadius: 15
  }
});

Props

• value
• minimumValue
• maximumValue
• step
• trackSize
• thumbSize
• thumbTouchSize
• icon
• disabled
• thumbColor
• trackColor
• progressTrackColor
• onStart
• onChange
• onComplete
• style
• trackStyle
• thumbStyle

Reference

value

Initial value of the slider should be between minimum and maximum value

minimumValue

minimum value of the slider.

maximumValue

maximum value of the slider.

step

Step value of the slider. The value should be between 0 and maximumValue - minimumValue

trackSize

Step the height of the track.

thumbSize

Step the size of the thumb

thumbTouchSize

Step the Press area of the thumb

icon

Slider thumb Custom Icon ( JSX Element)

disabled

If true, disable all interactions for this component.

thumbColor

Color of the Thumb

trackColor

Color of the track

progressTrackColor

Color of the progressed track .

onStart

Callback called when the user starts changing the value (e.g. when the slider is pressed)

onChange

Callback continuously called while the user is dragging the slider

onComplete

Callback called when the user finishes changing the value (e.g. when the slider is released)

style

override Slider Container Style which include ( track and thumb )

trackStyle

override Slider Track Style .

thumbStyle

override Slider Thumb Style .