1.6.1 • Public • Published

    🕹️ react-circle-slider-temperature


    This is not my own work! I have just edited this library to display a temperature instead of a number in the range.

    Circle Slider Component for React.js


    ⚡ Functionality

    • Simple to use
    • No extra dependencies
    • Highly customizable
    • Defining min and max values
    • Defining step size
    • Defining gradient color
    • Touch support
    • Tooltip support
    • Style based: no images / SVGs


    🚀 Getting started

    Install react-circle-slider using npm.

    npm install --save react-circle-slider

    You can also test the components locally by cloning this repo and doing the following steps:

    🔲 NPM-scripts

    Install dependencies from package.json:

    npm install

    Runs the app in the development mode.
    Open http://localhost:1234 to view it in the browser.

    npm run dev

    Run linter

    npm run lint

    Start tests followed by jest

    npm run test


    import React from "react";
    import ReactDOM from "react-dom";
    import { CircleSlider } from "react-circle-slider";
    export class App extends React.Component {
        constructor(props) {
            this.state = { value: 0 };
        handleChange = value => {
            console.log(`Changed value ${value}`);
            this.setState({ value });
        handleChangeRange = event => {
        render() {
            const { value } = this.state;
            return <CircleSlider value={value} onChange={this.handleChange} />;
    ReactDOM.render(<App />, document.getElementById("root"));

    📃 Props

    Props Type Default Description
    size Number 180 size of the slider in px
    stepSize Number 1 value to be added or subtracted on each step the slider makes.
    knobRadius Number null knob radius in px
    circleWidth Number null width of circle in px
    progressWidth Number null progress curve width in px
    min Number 0 the minimum value of the slider
    max Number 100 the maximum value of the slider
    value Number 0 value
    circleColor String #e9eaee color of slider
    progressColor String #007aff color of progress curve
    gradientColorFrom String NOOP start gradient color of progress curve
    gradientColorTo String NOOP end gradient color progress curve
    knobColor String #fff color of knob
    disabled Boolean false disabled status
    shadow Boolean true shadow on knob
    showTooltip Boolean false tooltip
    showPercentage Boolean false percentage on tooltip
    tooltipSize Number 32 size of tooltip
    tooltipColor String #333 color of tooltip
    onChange Function NOOP when slider is moved, onChange is triggered.

    💡 Todo

    • Keyboard support
    • Mouse scroll support
    • Accessibility

    💻 Contributing

    • For bugs and feature requests, please create an issue
    • Lint and test your code
    • Pull requests and ⭐ stars are always welcome




    npm i react-circle-slider-temperature

    DownloadsWeekly Downloads






    Unpacked Size

    418 kB

    Total Files


    Last publish


    • tomdango