@dooboo-ui/native-slider v0.7.0

Slider

Props

Installation

yarn add @dooboo-ui/native

or

yarn add @dooboo-ui/native-slider

Usage

import React, { ReactElement } from 'react';

import { Slider } from '@dooboo-ui/native';
// or
import Slider from '@dooboo-ui/native-slider';
import styled from 'styled-components/native';

function Page(): ReactElement {
  const handleChange = (value) => {
    // Do something!
  };

  return (
    <Container>
      <Slider
        step={10}
        defaultValue={20}
        minValue={0}
        maxValue={100}
      />

      <Slider
        minValue={0}
        maxValue={5}
        step={1}
        hideLabel={false}
        autoLabel
        onChange={handleChange}
      />

      <Slider
        minValue={0}
        maxValue={10}
        defaultValue={6}
        step={1}
        railStyle={{ backgroundColor: '#90A4F9' }}
        trackStyle={{ backgroundColor: '#0B21E8' }}
        thumbSize={8}
        thumbStyle={{ backgroundColor: '#0B21E8' }}
        markStyle={{ backgroundColor: '#4163F4' }}
        labelSize={15}
        labelStyle={{ backgroundColor: '#0B21E8' }}
        labelTextStyle={{ color: '#FFFFFF', fontSize: 12 }}
        onChange={handleChange}
      />
    </Container>
  );
}

export default Page;