Necrotizing Pineapple Music
    Have ideas to improve npm?Join in the discussion! »

    @evercoder/react-circular-slider-bar

    1.3.5 • Public • Published

    React Circular Slider Bar

    Enjoy a circular slider bar component for React with no unnecessary dependencies

    Key Features:

    • Simple to use
    • Highly customizable
    • No extra dependencies
    • Style based: no images / SVGs

    Check the demo!


    Getting started

    install

    npm install --save-dev react-circular-slider-bar
    

    usage example

    import React from 'react';
    import CircularSlider from 'react-circular-slider-bar';
    
    const myApp = () => (
      <div>
        ...my awesome stuff...
        <CircularSlider
          r={50}
          trackWidth={10}
          thumbWidth={10}
          onChange={value => console.log(value)}
        />
      </div>
    );
    
    export default myApp;
    

    controlled component

    <CircularSlider
      value={this.state.value}
      onChange={value => this.setState({ value })}
    />
    

    Props

    prop type deafult
    r number 80
    initialAngle number 90
    value number undefined
    trackWidth number 2
    trackColor string #f5f5dc
    arcColor string #7985f1
    thumbWidth number 10
    thumbColor string white
    thumbBorderWidth number 2
    thumbBorderColor string #cccccc
    onChange func value => {}

    Install

    npm i @evercoder/react-circular-slider-bar

    DownloadsWeekly Downloads

    11

    Version

    1.3.5

    License

    MIT

    Unpacked Size

    234 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar