Nuclear Powered Macros

    @lighthouseapps/react-native-range-slider

    1.0.1 • Public • Published

    react-native-range-slider

    React Native Range Slider for Android and iOS

    Getting started

    $ npm i @lighthouseapps/react-native-range-slider --save $ react-native link @lighthouseapps/react-native-range-slider

    Usage

    import RangeSlider from '@lighthouseapps/react-native-range-slider';
    
    <RangeSlider {PROPERTIES} />

    Properties

    Property Description Type Default Value
    onValueChanged A callback to be called when value was changed.
    (lowValue, highValue, fromUser) => {}
    fromUser parameter is true if the value was changed because of user's interaction (not by setting lowValue or highValue properties). Just like android's OnSeekbarChangeListener.
    Function 4
    rangeEnabled Slider works as an ordinary slider with 1 control if false Boolean true
    lineWidth Width of slider's line Number 4
    thumbRadius Radius of thumb (including border) Number 10
    thumbBorderWidth Border width of thumb Number 2
    textSize Size of label text Number 16
    labelBorderWidth Border width of label Number 2
    labelPadding Padding of label (distance between border and text) Number 4
    labelBorderRadius Border radius of label bubble Number 4
    labelTailHeight Height of label bubble's tail Number 8
    labelGapHeight Gap between label and slider Number 4
    textFormat This string will be formatted with active value and shown in thumb String
    "Price: %d" =>
    "Price: 75"
    if the current value is 75
    %d
    (just the number)
    labelStyle Style of the label.
    Label is not shown if none
    String

    Currently supported values:
    - none
    - bubble
    bubble
    gravity Vertical gravity of drawn content String

    Currently supported values:
    - top
    - bottom
    - center
    top
    selectionColor Color of selected part String
    (#RRGGBB or #AARRGGBB)
    #4286f4
    blankColor Color of unselected part String
    (#RRGGBB or #AARRGGBB)
    #7fffffff
    thumbColor Color of thumb String
    (#RRGGBB or #AARRGGBB)
    #ffffff
    thumbBorderColor Color of thumb's border String
    (#RRGGBB or #AARRGGBB)
    #cccccc
    labelBackgroundColor Color label's background String
    (#RRGGBB or #AARRGGBB)
    #ff60ad
    labelBorderColor Color label's border String
    (#RRGGBB or #AARRGGBB)
    #d13e85
    labelTextColor Color label's text String
    (#RRGGBB or #AARRGGBB)
    #ffffff
    min Minimum value of slider Number (integer) 0
    max Maximum value of slider Number (integer) 100
    step Step of slider Number (integer) 1
    lowValue Current value of lower thumb Number (integer) 0
    highValue Current value of higher thumb Number (integer) 100

    Install

    npm i @lighthouseapps/react-native-range-slider

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    61.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • leosampc
    • marlonconstante
    • gustavo-kuze
    • donnes
    • alvarosilveiraa
    • lhdev