Giter VIP home page Giter VIP logo

react-circular-slider's Introduction

react-circular-slider

A highly customizable circular slider with no dependencies. See some live demos here!

An image showing the CircularSlider settings

install

npm install @fseehawer/react-circular-slider

example

import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';

const App = () => {
    return (
        <CircularSlider
            onChange={ value => { console.log(value); } }
        />
    )
};

export default App;

Use min and max props to define the range of numbers. Use prependToValue/appendToValue if you want to prepend/append e.g. "$" or "°" to the value. Or simply use the data prop and pass any number or string sequence as an array to be spread in 360°. See some live demos here!

import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';

const App = () => {
    return (
        <CircularSlider
            label="savings"
            labelColor="#005a58"
            knobColor="#005a58"
            progressColorFrom="#00bfbd"
            progressColorTo="#009c9a"
            progressSize={24}
            trackColor="#eeeeee"
            trackSize={24}
            data={["1€","2€"]} //...
            dataIndex={10}
            onChange={ value => { console.log(value); } }
        />
    )
};

export default App;

Props

prop type default Affects
width number 280 width of the slider
direction number 1 clockwise (1) or anticlockwise (-1)
min number 0 smallest value
max number 360 largest value
data array [] array of data to be spread in 360°
dataIndex number 0 initially place knob at a certain value in the array
knobColor string #4e63ea knob color
knobSize number 32 knob size
hideKnob boolean false hide knob
knobDraggable boolean true knob draggable
knobPosition string top knob's 0 position to be top, right, bottom or left
label string ANGLE label
labelColor string #272b77 label and value color
labelBottom boolean false label position at bottom
labelFontSize string 1rem label font-size
valueFontSize string 4rem label value font-size
appendToValue string '' append character to value
prependToValue string '' prepend character to value
renderLabelValue jsx null add custom jsx code for the labels and styles
verticalOffset string 2rem vertical offset of the label and value
hideLabelValue boolean false hide label and value
progressColorFrom string #80C3F3 progress track gradient start color
progressColorTo string #4990E2 progress track gradient end color
progressSize number 8 progress track size
progressLineCap string round progress track cap to be round or flat
trackColor string #DDDEFB background track color
trackSize number 8 background track size
onChange func value => {} returns label value
isDragging func value => {} returns isDragging value

Please consider a small donation. Even one dollar will help to maintain and develop new features. Thanks!

You can find the donate button on the bottom of the example page

license

MIT License

react-circular-slider's People

Contributors

fseehawer avatar dependabot[bot] avatar fabianbru avatar augustolopez avatar ceamkrier avatar mmounirf avatar

Stargazers

Roman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.