├── .gitignore ├── example ├── src │ ├── components │ │ ├── toggle.css │ │ ├── Header.js │ │ ├── Slider.js │ │ ├── examples.css │ │ ├── Code.js │ │ ├── Footer.js │ │ ├── colorpicker.css │ │ ├── code.css │ │ ├── Options.js │ │ ├── Events.js │ │ └── Examples.js │ ├── index.js │ ├── index.css │ ├── App.css │ └── App.js ├── .babelrc ├── public │ └── index.html ├── package.json └── webpack.config.js ├── setupJest.js ├── .babelrc ├── .eslintrc ├── .travis.yml ├── src ├── utils.js └── index.js ├── tests ├── utils.test.js └── Slider.test.js ├── LICENSE ├── index.d.ts ├── rollup.config.js ├── package.json └── Readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | yarn.lock 4 | build 5 | -------------------------------------------------------------------------------- /example/src/components/toggle.css: -------------------------------------------------------------------------------- 1 | #slider-toggle { 2 | height: 50px; 3 | margin: auto; 4 | } 5 | -------------------------------------------------------------------------------- /setupJest.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | configure({ adapter: new Adapter() }); -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["@babel/plugin-proposal-class-properties"] 4 | } 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": [ 4 | ["transform-react-remove-prop-types", { "removeImport": true }] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /example/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Header = () => ( 4 |
5 |

React NoUiSlider component

6 |
7 | ); 8 | 9 | export default Header; 10 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React-NoUiSlider Package 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["airbnb", "prettier"], 4 | "rules": { 5 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 6 | "react/no-unused-prop-types": 1 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | /* global document */ 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import App from './App'; 5 | 6 | import './index.css'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2980b9; 3 | font-family: Trebuchet MS, serif; 4 | } 5 | 6 | h1, 7 | h2, 8 | h4 { 9 | color: #fff; 10 | line-height: 100%; 11 | } 12 | 13 | h1 { 14 | font-size: 100px; 15 | } 16 | 17 | h2 { 18 | font-size: 86px; 19 | } 20 | 21 | h4 { 22 | font-size: 48px; 23 | } 24 | -------------------------------------------------------------------------------- /example/src/components/Slider.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Nouislider from 'nouislider-react'; 3 | import 'nouislider/distribute/nouislider.css'; 4 | 5 | const Slider = () => ( 6 |
7 | 8 |
9 | ); 10 | 11 | export default Slider; 12 | -------------------------------------------------------------------------------- /example/src/components/examples.css: -------------------------------------------------------------------------------- 1 | .examples { 2 | width: 75%; 3 | margin: auto auto 50px; 4 | } 5 | 6 | .examples h4 { 7 | text-align: center; 8 | } 9 | 10 | .examples button { 11 | margin: 20px; 12 | } 13 | 14 | .warning { 15 | width: 50%; 16 | background-color: #fff; 17 | color: #c0392b; 18 | text-align: center; 19 | margin: auto auto 20px; 20 | } 21 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | dist: trusty 2 | language: node_js 3 | node_js: 4 | - 10 5 | cache: 6 | directories: 7 | # Instead of saving node_modules to the cache, 8 | # we will save local npm cache, as npm will use 9 | # ci command to install dependencies 10 | # 11 | # https://docs.npmjs.com/cli/ci#example 12 | - '$HOME/.npm' 13 | script: 14 | - npm run coveralls 15 | -------------------------------------------------------------------------------- /example/src/components/Code.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './code.css'; 3 | 4 | const Code = () => ( 5 |
6 | 
 7 |       
 8 |         {``}
12 |       
13 |
14 |
15 | ); 16 | 17 | export default Code; 18 | -------------------------------------------------------------------------------- /example/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => ( 4 | 12 | ); 13 | 14 | export default Footer; 15 | -------------------------------------------------------------------------------- /example/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | header { 3 | text-align: center; 4 | } 5 | 6 | .slider { 7 | width: 50%; 8 | margin: auto; 9 | } 10 | 11 | .code { 12 | width: 35%; 13 | margin: 40px auto; 14 | } 15 | 16 | ul { 17 | list-style-type: none; 18 | } 19 | 20 | li { 21 | padding: 10px; 22 | color: #fff; 23 | } 24 | 25 | li a { 26 | text-transform: none; 27 | } 28 | 29 | .info { 30 | text-align: center; 31 | color: #fff; 32 | margin-bottom: 20px; 33 | } 34 | 35 | a { 36 | text-transform: uppercase; 37 | color: #fff; 38 | } 39 | 40 | footer a { 41 | color: #000; 42 | text-transform: none; 43 | } 44 | -------------------------------------------------------------------------------- /example/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from './components/Header'; 4 | import Slider from './components/Slider'; 5 | import Code from './components/Code'; 6 | import Options from './components/Options'; 7 | import Events from './components/Events'; 8 | import Examples from './components/Examples'; 9 | import Footer from './components/Footer'; 10 | 11 | import './App.css'; 12 | 13 | const App = () => ( 14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | ); 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /example/src/components/colorpicker.css: -------------------------------------------------------------------------------- 1 | #red, 2 | #green, 3 | #blue { 4 | margin: 10px; 5 | display: inline-block; 6 | height: 200px; 7 | } 8 | 9 | #colorpicker { 10 | height: 240px; 11 | width: 310px; 12 | margin: 0 auto; 13 | padding: 10px; 14 | border: 1px solid #bfbfbf; 15 | background: #bfbfbf; 16 | } 17 | 18 | #result { 19 | margin: 60px 26px; 20 | height: 100px; 21 | width: 100px; 22 | display: inline-block; 23 | vertical-align: top; 24 | border: 1px solid #fff; 25 | box-shadow: 0 0 10px; 26 | } 27 | 28 | #red .noUi-connect { 29 | background: #c0392b; 30 | } 31 | 32 | #green .noUi-connect { 33 | background: #27ae60; 34 | } 35 | 36 | #blue .noUi-connect { 37 | background: #2980b9; 38 | } 39 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | const sortObjectKeys = obj => 2 | Object.entries(obj) 3 | .sort() 4 | .reduce((o, [k, v]) => ((o[k] = v), o), {}); 5 | 6 | export const isEqual = (val1, val2) => { 7 | if (typeof val1 === "number" && typeof val2 === "number") 8 | return val1 === val2; 9 | if (typeof val1 === "string" && typeof val2 === "string") 10 | return val1 === val2; 11 | if (Array.isArray(val1) && Array.isArray(val2)) { 12 | return JSON.stringify(val1) === JSON.stringify(val2); 13 | } 14 | if (typeof val1 === "object" && typeof val2 === "object") { 15 | return ( 16 | JSON.stringify(sortObjectKeys(val1)) === 17 | JSON.stringify(sortObjectKeys(val2)) 18 | ); 19 | } 20 | return false; 21 | }; 22 | -------------------------------------------------------------------------------- /example/src/components/code.css: -------------------------------------------------------------------------------- 1 | code[class*='language-'], 2 | pre[class*='language-'] { 3 | color: #ccc; 4 | background: none; 5 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 6 | text-align: left; 7 | white-space: pre; 8 | word-spacing: normal; 9 | word-break: normal; 10 | word-wrap: normal; 11 | line-height: 1.5; 12 | 13 | -moz-tab-size: 4; 14 | -o-tab-size: 4; 15 | tab-size: 4; 16 | 17 | -webkit-hyphens: none; 18 | -moz-hyphens: none; 19 | -ms-hyphens: none; 20 | hyphens: none; 21 | } 22 | 23 | /* Code blocks */ 24 | pre[class*='language-'] { 25 | padding: 1em; 26 | margin: 0.5em 0; 27 | overflow: auto; 28 | } 29 | 30 | :not(pre) > code[class*='language-'], 31 | pre[class*='language-'] { 32 | background: #2d2d2d; 33 | } 34 | 35 | /* Inline code */ 36 | :not(pre) > code[class*='language-'] { 37 | padding: 0.1em; 38 | border-radius: 0.3em; 39 | white-space: normal; 40 | } 41 | -------------------------------------------------------------------------------- /tests/utils.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | 3 | import { isEqual } from '../src/utils'; 4 | 5 | describe('isEqual function', () => { 6 | it('Return right result for comparing numbers', () => { 7 | expect(isEqual(4, 4)).toBe(true); 8 | }); 9 | 10 | it('Return right result for comparing strings', () => { 11 | expect(isEqual('a', 'b')).toBe(false); 12 | }); 13 | 14 | it('Return right result for comparing arrays', () => { 15 | expect(isEqual(['a', 3], ['a', 3])).toBe(true); 16 | }); 17 | 18 | it('Return right result for comparing objects', () => { 19 | expect(isEqual({ max: [3], min: 3 }, { min: 3, max: [3] })).toBe(true); 20 | }); 21 | 22 | it('Return false for comparing values with different types', () => { 23 | expect(isEqual(3, '3')).toBe(false); 24 | }); 25 | 26 | it('Return false for comparing objects with different values', () => { 27 | expect(isEqual({ min: 3, max: 3 }, { min: 3, max: 1 })).toBe(false); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Maksim Markelov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/src/components/Options.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Options = () => ( 4 |
5 |

Options:

6 |
    7 |
  • 8 | START - Accepted values : string, array[string], array[string, 9 | string, ...] 10 |
    • 11 |
  • 12 | CONNECT - Accepted values : true, false, array[...] 13 |
    • 14 |
  • 15 | MARGIN - Accepted values : number 16 |
    • 17 |
  • 18 | LIMIT - Accepted values : number 19 |
    • 20 |
  • 21 | PADDING - Accepted values : number, array[number], array[number, 22 | number, ...] 23 |
    • 24 |
  • 25 | STEP - Accepted values : number 26 |
    • 27 |
  • 28 | ORIENTATION - Accepted values : vertical, horizontal 29 |
    • 30 |
  • 31 | DIRECTION - Accepted values : ltr, rtl 32 |
    • 33 |
  • 34 | TOOLTIPS - Accepted values : false, true, 35 | array[formatter or true or false, ...] 36 |
    • 37 |
  • 38 | ANIMATE - Accepted values : true, false 39 |
    • 40 |
41 |
42 | ); 43 | 44 | export default Options; 45 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Callback { 4 | /** 5 | * Array for both one-handle and two-handle sliders. It contains the current slider values, 6 | * with formatting applied. 7 | */ 8 | (values: any[], handle: number, unencodedValues: number[], tap: boolean, positions: number[]): void; 9 | } 10 | 11 | interface Formatter { 12 | to(val: number): string | number; 13 | from(val: string | number): number; 14 | } 15 | 16 | export interface NouisliderProps { 17 | animate?: boolean; 18 | behaviour?: string; 19 | className?: string; 20 | clickablePips?: boolean; 21 | connect?: boolean[] | boolean; 22 | direction?: "ltr" | "rtl"; 23 | disabled?: boolean; 24 | format?: Formatter; 25 | keyboardSupport?: boolean; 26 | id?: string; 27 | instanceRef?: (instance: React.Ref) => void; 28 | limit?: number; 29 | margin?: number; 30 | onChange?: Callback; 31 | onEnd?: Callback; 32 | onSet?: Callback; 33 | onSlide?: Callback; 34 | onStart?: Callback; 35 | onUpdate?: Callback; 36 | orientation?: "horizontal" | "vertical"; 37 | padding?: number | number[]; 38 | pips?: object; 39 | range: object; 40 | snap?: boolean; 41 | start: number | number[] | string | string[]; 42 | step?: number; 43 | style?: React.CSSProperties; 44 | tooltips?: boolean | (boolean | Formatter)[]; 45 | } 46 | 47 | export default class Nouislider extends React.Component {} 48 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-nouislider-example", 3 | "version": "3.4.0", 4 | "description": "React NoUiSlider implementation", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/mmarkelov/react-nouislider" 8 | }, 9 | "scripts": { 10 | "dev": "webpack serve --mode development", 11 | "build:example": "rm -rf ./example/build && webpack --mode production --env production", 12 | "publish:example": "npm run build:example && gh-pages -d ./build" 13 | }, 14 | "keywords": [ 15 | "react", 16 | "nouislider", 17 | "slider", 18 | "component", 19 | "reactjs", 20 | "range", 21 | "slider" 22 | ], 23 | "author": "Maksim Markelov ", 24 | "license": "MIT", 25 | "dependencies": { 26 | "nouislider": "^14.6.3", 27 | "react": "^17.0.1", 28 | "react-dom": "^17.0.1" 29 | }, 30 | "devDependencies": { 31 | "@babel/cli": "^7.13.10", 32 | "@babel/core": "^7.13.10", 33 | "@babel/plugin-proposal-class-properties": "^7.13.0", 34 | "@babel/plugin-proposal-object-rest-spread": "^7.13.8", 35 | "@babel/preset-env": "^7.13.10", 36 | "@babel/preset-react": "^7.12.13", 37 | "babel-loader": "^8.2.2", 38 | "css-loader": "^5.1.1", 39 | "file-loader": "^6.2.0", 40 | "gh-pages": "^3.1.0", 41 | "html-loader": "^2.1.2", 42 | "html-webpack-plugin": "^5.3.1", 43 | "mini-css-extract-plugin": "^1.3.9", 44 | "webpack": "^5.24.4", 45 | "webpack-cli": "^4.5.0", 46 | "webpack-dev-server": "^3.11.2" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const babel = require('rollup-plugin-babel'); 4 | const commonjs = require('rollup-plugin-commonjs'); 5 | const nodeResolve = require('rollup-plugin-node-resolve'); 6 | const { terser } = require('rollup-plugin-terser'); 7 | const replace = require('rollup-plugin-replace'); 8 | 9 | const { name, peerDependencies } = require('./package.json'); 10 | 11 | const NODE_ENV = process.env.NODE_ENV || 'production'; 12 | 13 | const formats = ['cjs', 'esm', 'umd']; 14 | 15 | const outputs = formats.map(format => ({ 16 | file: [ 17 | path.join(__dirname, 'dist', name), 18 | format, 19 | NODE_ENV === 'production' ? 'production.min' : false, 20 | 'js', 21 | ] 22 | .filter(Boolean) 23 | .join('.'), 24 | format, 25 | sourcemap: NODE_ENV === 'production', 26 | globals: { 27 | react: 'React', 28 | nouislider: 'nouislider' 29 | }, 30 | ...(format === 'umd' && { name: 'ReactNouislider' }), 31 | })); 32 | 33 | const commonConfig = { 34 | input: path.resolve(__dirname, 'src/index.js'), 35 | plugins: [ 36 | NODE_ENV === 'production' && 37 | replace({ 38 | 'process.env.NODE_ENV': JSON.stringify(NODE_ENV), 39 | }), 40 | 41 | babel({ 42 | exclude: 'node_modules/**', 43 | }), 44 | 45 | commonjs({ 46 | include: 'node_modules/**', 47 | }), 48 | 49 | nodeResolve({ 50 | mainFields: ['jsnext:main', 'module'], 51 | browser: true, 52 | }), 53 | 54 | NODE_ENV === 'production' && terser(), 55 | ].filter(Boolean), 56 | external: Object.keys(peerDependencies), 57 | }; 58 | 59 | module.exports = outputs.map(output => ({ ...commonConfig, output })); 60 | -------------------------------------------------------------------------------- /example/src/components/Events.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Events = () => ( 4 |
5 |

6 | Events: 7 |

8 |
    9 |
  • 10 | 11 | onUpdate 12 | {' '} 13 | - fires every time the slider values are changed, either by a user or by 14 | calling API methods. 15 |
    • 16 |
  • 17 | 18 | onSlide 19 | {' '} 20 | - fires on a change by a 'tap'. 21 |
    • 22 |
  • 23 | 24 | onSet 25 | {' '} 26 | - will trigger every time a slider stops changing 27 |
    • 28 |
  • 29 | 30 | onChange 31 | {' '} 32 | - fires when a user stops sliding, or when a slider value is changed by 33 | 'tap'. 34 |
    • 35 |
  • 36 | 37 | onStart 38 | {' '} 39 | - This event fires when a handle is clicked 40 |
    • 41 |
  • 42 | 43 | onEnd 44 | {' '} 45 | - fires when a handle is released 46 |
    • 47 |
48 |
49 | ); 50 | 51 | export default Events; 52 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | const reactNoUiSlider = path.resolve('../src'); 6 | const react = path.resolve('../node_modules/react'); 7 | const reactDOM = path.resolve('../node_modules/react-dom'); 8 | 9 | const vendor = ['react', 'react-dom']; 10 | 11 | module.exports = (env) => { 12 | const isDebug = !env.production; 13 | return { 14 | devtool: isDebug ? "source-map" : "hidden-source-map", 15 | 16 | devServer: { 17 | open: true, 18 | compress: true, 19 | port: 3004, 20 | }, 21 | 22 | entry: { 23 | vendor, 24 | index: "./src/index.js", 25 | }, 26 | 27 | output: { 28 | path: path.join(__dirname, "/build"), 29 | publicPath: isDebug ? "/" : "/react-nouislider/", 30 | filename: isDebug ? "[name].js" : "static/js/[name].[chunkhash:8].js", 31 | }, 32 | 33 | resolve: { 34 | alias: { 35 | "nouislider-react": reactNoUiSlider, 36 | react, 37 | "react-dom": reactDOM, 38 | }, 39 | }, 40 | 41 | cache: isDebug, 42 | 43 | module: { 44 | rules: [ 45 | { 46 | test: /\.js$/, 47 | exclude: /node_modules/, 48 | use: [ 49 | { 50 | loader: "babel-loader", 51 | options: { 52 | presets: ["@babel/preset-env", "@babel/preset-react"], 53 | plugins: [ 54 | "@babel/plugin-proposal-class-properties", 55 | "@babel/plugin-proposal-object-rest-spread", 56 | ], 57 | }, 58 | }, 59 | ], 60 | }, 61 | { 62 | test: /\.html$/, 63 | use: [ 64 | { 65 | loader: "html-loader", 66 | options: { minimize: true }, 67 | }, 68 | ], 69 | }, 70 | { 71 | test: /\.(gif|png|svg|jpe?g)$/, 72 | use: [ 73 | { 74 | loader: "file-loader", 75 | options: { 76 | name: "static/assets/[name].[hash:8].[ext]", 77 | }, 78 | }, 79 | ], 80 | }, 81 | { 82 | test: /\.css$/, 83 | use: [MiniCssExtractPlugin.loader, "css-loader"], 84 | }, 85 | ], 86 | }, 87 | 88 | plugins: [ 89 | new HtmlWebpackPlugin({ 90 | inject: true, 91 | template: "./public/index.html", 92 | }), 93 | new MiniCssExtractPlugin({ 94 | filename: "[name].css", 95 | chunkFilename: "[id].css", 96 | }), 97 | ], 98 | }; 99 | }; 100 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nouislider-react", 3 | "private": false, 4 | "version": "3.4.2", 5 | "description": "React component wrapping leongersen/noUiSlider", 6 | "main": "dist/nouislider-react.cjs.js", 7 | "module": "dist/nouislider-react.esm.js", 8 | "browser": "dist/nouislider-react.umd.production.min.js", 9 | "typings": "index.d.ts", 10 | "scripts": { 11 | "clear": "rm -rf dist", 12 | "build": "npm run clear && NODE_ENV=development rollup -c && NODE_ENV=production rollup -c", 13 | "test": "jest ./tests/", 14 | "test:coverage": "jest --coverage ./tests/", 15 | "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls", 16 | "test:watch": "jest --watch ./tests/", 17 | "prepublishOnly": "npm run build", 18 | "prettier": "prettier --write src/*.js", 19 | "precommit": "lint-staged" 20 | }, 21 | "jest": { 22 | "setupFiles": [ 23 | "/setupJest.js" 24 | ] 25 | }, 26 | "lint-staged": { 27 | "src/*.js": [ 28 | "npm run prettier", 29 | "git add" 30 | ], 31 | "*.md": [ 32 | "npm run prettier", 33 | "git add" 34 | ] 35 | }, 36 | "files": [ 37 | "dist", 38 | "index.d.ts", 39 | "README.md", 40 | "LICENSE" 41 | ], 42 | "repository": { 43 | "type": "git", 44 | "url": "https://github.com/mmarkelov/react-nouislider" 45 | }, 46 | "keywords": [ 47 | "react", 48 | "nouislider", 49 | "slider", 50 | "component", 51 | "reactjs", 52 | "range", 53 | "slider" 54 | ], 55 | "author": "Maksim Markelov ", 56 | "homepage": "https://github.com/mmarkelov/react-nouislider", 57 | "license": "MIT", 58 | "dependencies": { 59 | "nouislider": "^14.6.3" 60 | }, 61 | "peerDependencies": { 62 | "nouislider": ">= 11.x", 63 | "react": ">= 16.8.x" 64 | }, 65 | "devDependencies": { 66 | "@babel/cli": "^7.14.8", 67 | "@babel/core": "^7.15.0", 68 | "@babel/preset-env": "^7.15.0", 69 | "@babel/preset-react": "^7.14.5", 70 | "babel-eslint": "^10.1.0", 71 | "babel-jest": "^27.1.0", 72 | "babel-plugin-transform-react-remove-prop-types": "^0.4.24", 73 | "coveralls": "^3.1.1", 74 | "enzyme": "^3.11.0", 75 | "enzyme-adapter-react-16": "^1.15.6", 76 | "eslint": "^7.32.0", 77 | "eslint-config-airbnb": "^18.2.1", 78 | "eslint-config-prettier": "^8.3.0", 79 | "eslint-plugin-import": "^2.24.2", 80 | "eslint-plugin-jsx-a11y": "^6.4.1", 81 | "eslint-plugin-react": "^7.24.0", 82 | "husky": "^7.0.2", 83 | "jest": "^27.1.0", 84 | "lint-staged": "^11.1.2", 85 | "prettier": "^2.3.2", 86 | "prop-types": "^15.7.2", 87 | "react": "^17.0.2", 88 | "react-dom": "^17.0.2", 89 | "rollup": "^2.56.3", 90 | "rollup-plugin-babel": "^4.4.0", 91 | "rollup-plugin-commonjs": "^10.1.0", 92 | "rollup-plugin-node-resolve": "^5.2.0", 93 | "rollup-plugin-replace": "^2.2.0", 94 | "rollup-plugin-terser": "^7.0.2" 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /tests/Slider.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | 3 | import React from 'react'; 4 | import { mount } from 'enzyme'; 5 | import Nouislider from '../src'; 6 | 7 | describe('Slider', () => { 8 | test('mounted correctly', () => { 9 | const wrapper = mount( 10 | , 11 | ); 12 | expect(wrapper.render().hasClass('noUi-target')).toBe(true); 13 | }); 14 | 15 | test('should apply id option and pass it to div', () => { 16 | const wrapper = mount( 17 | , 23 | ); 24 | expect(wrapper.html().includes('id="test"')).toBe(true); 25 | }); 26 | 27 | test('should apply className option and pass it to div', () => { 28 | const wrapper = mount( 29 | , 35 | ); 36 | expect(wrapper.hasClass('test')).toBe(true); 37 | }); 38 | 39 | test('should add cursor style if clickablePips props was passed', () => { 40 | const wrapper = mount( 41 | , 50 | ); 51 | expect(wrapper.html().includes('cursor: pointer')).toBe(true); 52 | }); 53 | 54 | test('disabled prop should passed correctly', () => { 55 | const wrapper = mount( 56 | , 57 | ); 58 | expect(wrapper.prop('disabled')).toBe(true); 59 | }); 60 | 61 | test('unmount correctly', () => { 62 | const wrapper = mount( 63 | , 64 | ); 65 | wrapper.unmount(); 66 | const wrapper2 = mount( 67 | , 68 | ); 69 | expect(wrapper2.html().includes('id="unmount"')).toBe(true); 70 | }); 71 | 72 | describe('areEqual', () => { 73 | test('return right result for start', () => { 74 | const wrapper = mount( 75 | , 81 | ); 82 | wrapper.setProps({ start: 80 }); 83 | expect(wrapper.html().includes('aria-valuenow="80.0"')).toBe(true); 84 | }); 85 | 86 | test('return right result for disabled', () => { 87 | const wrapper = mount( 88 | , 95 | ); 96 | wrapper.setProps({ disabled: true }); 97 | expect(wrapper.prop('disabled')).toBe(true); 98 | }); 99 | 100 | test('return right result for range', () => { 101 | const wrapper = mount( 102 | , 109 | ); 110 | wrapper.setProps({ range: { min: 0, max: 100 } }); 111 | expect(wrapper.html().includes('aria-valuemax="100.0"')).toBe(true); 112 | }); 113 | 114 | test('return right result for step', () => { 115 | const wrapper = mount( 116 | , 124 | ); 125 | wrapper.setProps({ step: 5 }); 126 | expect(wrapper.prop('step')).toBe(5); 127 | }); 128 | }); 129 | 130 | describe('instanceRef', () => { 131 | test('functional instanceRef', () => { 132 | const refFunc = jest.fn(); 133 | mount( 134 | refFunc(instance)} 136 | start={0} 137 | range={{ 138 | min: 0, 139 | max: 50, 140 | }} 141 | />, 142 | ); 143 | expect(refFunc).toHaveBeenCalled(); 144 | }); 145 | 146 | test('instanceRef with React.createRef', () => { 147 | const ref = React.createRef(); 148 | const wrapper = mount( 149 | , 157 | ); 158 | 159 | expect(wrapper.find('div').instance()).toEqual(ref.current); 160 | }); 161 | 162 | test('instanceRef with React.createRef is null after unmount', () => { 163 | const ref = React.createRef(); 164 | const wrapper = mount( 165 | , 173 | ); 174 | wrapper.unmount(); 175 | 176 | expect(ref.current).toBe(null); 177 | }); 178 | }); 179 | }); 180 | -------------------------------------------------------------------------------- /example/src/components/Examples.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Nouislider from 'nouislider-react'; 3 | import 'nouislider/distribute/nouislider.css'; 4 | 5 | import './examples.css'; 6 | import './colorpicker.css'; 7 | import './toggle.css'; 8 | 9 | const COLORS = ['red', 'green', 'blue']; 10 | const colors = [0, 0, 0]; 11 | 12 | class Examples extends React.Component { 13 | state = { 14 | color: 'rgb(127, 127, 127)', 15 | textValue: null, 16 | percent: null, 17 | value: 0, 18 | disabled: false, 19 | range: { 20 | min: 0, 21 | max: 100, 22 | }, 23 | ref: null, 24 | }; 25 | 26 | onUpdate = index => (render, handle, value) => { 27 | colors[index] = value[0]; 28 | this.setState({ color: `rgb(${colors.join(',')})` }); 29 | }; 30 | 31 | onSlide = (render, handle, value, un, percent) => { 32 | this.setState({ 33 | textValue: value[0].toFixed(2), 34 | percent: percent[0].toFixed(2), 35 | }); 36 | }; 37 | 38 | onSkipSlide = (render, handle, value, un, percent) => { 39 | this.setState({ 40 | skippingValue: value[0], 41 | }); 42 | }; 43 | 44 | handleClick = () => { 45 | this.setState(prevState => ({ value: prevState.value + 10 })); 46 | }; 47 | 48 | changeDisabled = () => { 49 | this.setState(prevState => ({ disabled: !prevState.disabled })); 50 | }; 51 | 52 | changeRange = () => { 53 | this.setState({ 54 | range: { 55 | min: 0, 56 | max: 200, 57 | }, 58 | }); 59 | }; 60 | 61 | changeByRef = () => { 62 | const { ref } = this.state; 63 | if (ref && ref.noUiSlider) { 64 | ref.noUiSlider.set(20); 65 | } 66 | }; 67 | 68 | render() { 69 | const { 70 | color, 71 | textValue, 72 | percent, 73 | skippingValue, 74 | value, 75 | disabled, 76 | range, 77 | ref, 78 | } = this.state; 79 | return ( 80 |
81 |

82 | Examples: 83 |

84 |
85 |

Colorpicker:

86 |
87 | {COLORS.map((item, index) => ( 88 | 100 | ))} 101 |
102 |
103 |
104 |
105 |

Keyboard support:

106 | 113 |
114 |
115 |

Using ref:

116 | 117 | { 119 | if (instance && !ref) { 120 | this.setState({ ref: instance }); 121 | } 122 | }} 123 | start={0} 124 | range={{ 125 | min: 0, 126 | max: 50, 127 | }} 128 | /> 129 |
130 |
131 |

Non linear slider:

132 | 144 | {textValue && percent && ( 145 |
146 | Value: {textValue}, {percent} % 147 |
148 | )} 149 |
150 |
151 |

Clickable pips:

152 | 161 |
162 |
163 |

Skipping steps:

164 | 180 | {!!skippingValue &&
Value: {skippingValue}
} 181 |
182 |
183 |

Creating a toggle:

184 | 193 |
194 |
195 |

Change start by changing state:

196 | 197 | 204 |
205 |
206 |

Change disabled by changing state:

207 | 208 | 216 |
217 |
218 |

Change range by changing state:

219 | 220 | 221 |
222 |
223 | ); 224 | } 225 | } 226 | 227 | export default Examples; 228 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/mmarkelov/react-nouislider.svg?branch=master)](https://travis-ci.org/mmarkelov/react-nouislider) 2 | [![Coverage Status](https://coveralls.io/repos/github/mmarkelov/react-nouislider/badge.svg)](https://coveralls.io/github/mmarkelov/react-nouislider) 3 | 4 | **This project is created as react-nouislider package is not well maintained. 5 | Also you can have a look at other natives react sliders: https://www.google.com/search?q=react+slider** 6 | 7 | # nouislider-react 8 | 9 | Wraps [leongersen/noUiSlider](https://github.com/leongersen/noUiSlider) in a [react component](https://facebook.github.io/react/docs/component-api.html). 10 | 11 | ## Documentation 12 | 13 | All the options used in nouislider-react are then passed to noUiSlider. See the [noUiSlider documentation](http://refreshless.com/nouislider/) before opening issues. 14 | 15 | ### Also there are extra options to implement new features: 16 | 17 | **clickablePips** use to move the slider by clicking pips 18 | 19 | ## Usage 20 | 21 | ```sh 22 | npm install nouislider-react 23 | ``` 24 | 25 | or 26 | 27 | ```sh 28 | yarn add nouislider-react 29 | ``` 30 | 31 | ```js 32 | import React from "react"; 33 | import Nouislider from "nouislider-react"; 34 | import "nouislider/distribute/nouislider.css"; 35 | 36 | const Slider = () => ( 37 | 38 | ); 39 | ``` 40 | 41 | ## Examples 42 | 43 | ### Colorpicker: 44 | 45 | ```js 46 | import React from "react"; 47 | import Nouislider from "nouislider-react"; 48 | import "nouislider/distribute/nouislider.css"; 49 | 50 | import "./colorpicker.css"; 51 | 52 | const COLORS = ["red", "green", "blue"]; 53 | 54 | class Colorpicker extends React.Component { 55 | state = { 56 | color: "rgb(127, 127, 127)" 57 | }; 58 | 59 | onUpdate = index => (render, handle, value, un, percent) => { 60 | colors[index] = value[0]; 61 | this.setState({ color: `rgb(${colors.join(",")})` }); 62 | }; 63 | 64 | render() { 65 | const { color } = this.state; 66 | return ( 67 |
68 | {COLORS.map((item, index) => ( 69 | 81 | ))} 82 |
83 |
84 | ); 85 | } 86 | } 87 | ``` 88 | 89 | ### Non linear slider: 90 | 91 | ```js 92 | import React from "react"; 93 | import Nouislider from "nouislider-react"; 94 | import "nouislider/distribute/nouislider.css"; 95 | 96 | class Slider extends React.Component { 97 | state = { 98 | textValue: null, 99 | percent: null 100 | }; 101 | 102 | onSlide = (render, handle, value, un, percent) => { 103 | this.setState({ 104 | textValue: value[0].toFixed(2), 105 | percent: percent[0].toFixed(2) 106 | }); 107 | }; 108 | 109 | render() { 110 | const { textValue, percent } = this.state; 111 | return ( 112 |
113 | 125 | {textValue && percent && ( 126 |
127 | Value: {textValue}, {percent} % 128 |
129 | )} 130 |
131 | ); 132 | } 133 | } 134 | ``` 135 | 136 | ### Adding keyboard support: 137 | 138 | ```js 139 | import React from "react"; 140 | import Nouislider from "nouislider-react"; 141 | import "nouislider/distribute/nouislider.css"; 142 | 143 | const KeyboardSlider = () => ( 144 | 153 | ); 154 | ``` 155 | 156 | ### Using with ref: 157 | 158 | ```js 159 | class KeyboardSlider extends React.Component { 160 | state = { ref: null }; 161 | 162 | changeByRef = () => { 163 | const { ref } = this.state; 164 | if (ref && ref.noUiSlider) { 165 | ref.noUiSlider.set(20); 166 | } 167 | }; 168 | 169 | render() { 170 | return ( 171 |
172 | 173 | { 175 | if (instance && !ref) { 176 | this.setState({ ref: instance }); 177 | } 178 | }} 179 | start={0} 180 | range={{ 181 | min: 0, 182 | max: 100 183 | }} 184 | /> 185 |
186 | ); 187 | } 188 | } 189 | ``` 190 | 191 | ### Moving the slider by clicking pips: 192 | 193 | ```js 194 | import React from "react"; 195 | import Nouislider from "nouislider-react"; 196 | import "nouislider/distribute/nouislider.css"; 197 | 198 | const KeyboardSlider = () => ( 199 | 208 | ); 209 | ``` 210 | 211 | ### Change start: 212 | 213 | ```js 214 | import React from "react"; 215 | import Nouislider from "nouislider-react"; 216 | import "nouislider/distribute/nouislider.css"; 217 | 218 | class KeyboardSlider extends React.Component { 219 | state = { value: 0 }; 220 | 221 | handleClick = () => { 222 | this.setState(prevState => ({ value: prevState + 10 })); 223 | }; 224 | 225 | render() { 226 | return ( 227 |
228 | 229 | 236 |
237 | ); 238 | } 239 | } 240 | ``` 241 | 242 | ## Examples 243 | 244 | 1. Fork this repository and clone your version of the repo 245 | 2. Install dependencies 246 | 247 | ```sh 248 | npm install 249 | ``` 250 | 251 | 3. Install example dependencies 252 | 253 | ```sh 254 | cd example && npm install 255 | ``` 256 | 257 | 4. Start example server locally 258 | 259 | ```sh 260 | npm run dev 261 | ``` 262 | 263 | ## TODO 264 | 265 | - [ ] Find solution for auto release process 266 | - [ ] Replace custom example process with **docz** 267 | - [ ] Rewrite Typescript declaration 268 | 269 | You now have examples running on 270 | `http://localhost:3004` 271 | 272 | Also you can check them [here](https://mmarkelov.github.io/react-nouislider/) 273 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | import nouislider from "nouislider"; 5 | 6 | import { isEqual } from "./utils"; 7 | 8 | const areEqual = (prevProps, nextProps) => { 9 | const { start, step, disabled, range } = prevProps; 10 | return ( 11 | nextProps.step === step && 12 | isEqual(nextProps.start, start) && 13 | nextProps.disabled === disabled && 14 | isEqual(nextProps.range, range) 15 | ); 16 | }; 17 | 18 | const Nouislider = props => { 19 | const [slider, setSlider] = useState(null); 20 | const sliderContainer = React.createRef(); 21 | 22 | useEffect(() => { 23 | const { instanceRef } = props; 24 | const isCreatedRef = 25 | instanceRef && 26 | Object.prototype.hasOwnProperty.call(instanceRef, "current"); 27 | if (instanceRef && instanceRef instanceof Function) { 28 | instanceRef(sliderContainer.current); 29 | } 30 | 31 | if (isCreatedRef) { 32 | // eslint-disable-next-line no-param-reassign 33 | instanceRef.current = sliderContainer.current; 34 | } 35 | 36 | return () => { 37 | if (isCreatedRef) { 38 | // eslint-disable-next-line no-param-reassign 39 | instanceRef.current = null; 40 | } 41 | }; 42 | }, [sliderContainer]); 43 | 44 | const clickOnPip = pip => { 45 | const value = Number(pip.target.getAttribute("data-value")); 46 | if (slider) { 47 | slider.set(value); 48 | } 49 | }; 50 | 51 | const toggleDisable = disabled => { 52 | const sliderHTML = sliderContainer.current; 53 | if (sliderHTML) { 54 | if (!disabled) { 55 | sliderHTML.removeAttribute("disabled"); 56 | } else { 57 | sliderHTML.setAttribute("disabled", true); 58 | } 59 | } 60 | }; 61 | 62 | const { onUpdate, onChange, onSlide, onStart, onEnd, onSet } = props; 63 | 64 | const updateEvents = (sliderComponent) => { 65 | if (onStart) { 66 | sliderComponent.off("start"); 67 | sliderComponent.on("start", onStart); 68 | } 69 | 70 | if (onSlide) { 71 | sliderComponent.off("slide"); 72 | sliderComponent.on("slide", onSlide); 73 | } 74 | 75 | if (onUpdate) { 76 | sliderComponent.off("update"); 77 | sliderComponent.on("update", onUpdate); 78 | } 79 | 80 | if (onChange) { 81 | sliderComponent.off("change"); 82 | sliderComponent.on("change", onChange); 83 | } 84 | 85 | if (onSet) { 86 | sliderComponent.off("set"); 87 | sliderComponent.on("set", onSet); 88 | } 89 | 90 | if (onEnd) { 91 | sliderComponent.off("end"); 92 | sliderComponent.on("end", onEnd); 93 | } 94 | } 95 | 96 | const updateOptions = options => { 97 | const sliderHTML = sliderContainer.current; 98 | sliderHTML.noUiSlider.updateOptions(options); 99 | }; 100 | 101 | const setClickableListeners = () => { 102 | if (props.clickablePips) { 103 | const sliderHTML = sliderContainer.current; 104 | [...sliderHTML.querySelectorAll(".noUi-value")].forEach(pip => { 105 | pip.style.cursor = "pointer"; 106 | pip.addEventListener("click", clickOnPip); 107 | }); 108 | } 109 | }; 110 | 111 | const createSlider = () => { 112 | if (sliderContainer.current.noUiSlider) return; 113 | 114 | const sliderComponent = nouislider.create(sliderContainer.current, { 115 | ...props 116 | }); 117 | 118 | updateEvents(sliderComponent); 119 | 120 | setSlider(sliderComponent); 121 | }; 122 | 123 | useEffect(() => { 124 | const { disabled } = props; 125 | const sliderHTML = sliderContainer.current; 126 | if (sliderHTML) { 127 | toggleDisable(disabled); 128 | createSlider(); 129 | } 130 | return () => { 131 | if (slider) slider.destroy(); 132 | if (sliderHTML) { 133 | [...sliderHTML.querySelectorAll(".noUi-value")].forEach(pip => { 134 | pip.removeEventListener("click", clickOnPip); 135 | }); 136 | } 137 | }; 138 | }, []); 139 | 140 | useEffect(() => { 141 | if (slider) { 142 | setClickableListeners() 143 | } 144 | }, [slider]); 145 | 146 | const { start, disabled, range, step, margin, padding, limit, pips, snap, animate } = props; 147 | 148 | useEffect(() => { 149 | if (slider) { 150 | updateOptions({range, step, padding, margin, limit, pips, snap, animate}); 151 | slider.set(start); 152 | setClickableListeners() 153 | } 154 | toggleDisable(disabled); 155 | }, [start, disabled, range, step, margin, padding, limit, pips, snap, animate]); 156 | 157 | useEffect(() => { 158 | if (slider) { 159 | updateEvents(slider) 160 | } 161 | }, [onUpdate, onChange, onSlide, onStart, onEnd, onSet]) 162 | 163 | const { id, className, style } = props; 164 | const options = {}; 165 | if (id) { 166 | options.id = id; 167 | } 168 | if (className) { 169 | options.className = className; 170 | } 171 | return
; 172 | }; 173 | 174 | Nouislider.propTypes = { 175 | // https://refreshless.com/nouislider/slider-options/#section-animate 176 | animate: PropTypes.bool, 177 | // https://refreshless.com/nouislider/behaviour-option/ 178 | behaviour: PropTypes.string, 179 | className: PropTypes.string, 180 | clickablePips: PropTypes.bool, 181 | // https://refreshless.com/nouislider/slider-options/#section-connect 182 | connect: PropTypes.oneOfType([ 183 | PropTypes.arrayOf(PropTypes.bool), 184 | PropTypes.bool 185 | ]), 186 | // http://refreshless.com/nouislider/slider-options/#section-orientation 187 | direction: PropTypes.oneOf(["ltr", "rtl"]), 188 | // https://refreshless.com/nouislider/more/#section-disable 189 | disabled: PropTypes.bool, 190 | format: PropTypes.object, 191 | keyboardSupport: PropTypes.bool, 192 | id: PropTypes.string, 193 | instanceRef: PropTypes.oneOf([PropTypes.func, PropTypes.object]), 194 | // https://refreshless.com/nouislider/slider-options/#section-limit 195 | limit: PropTypes.number, 196 | // https://refreshless.com/nouislider/slider-options/#section-margin 197 | margin: PropTypes.number, 198 | // https://refreshless.com/nouislider/events-callbacks/#section-change 199 | onChange: PropTypes.func, 200 | // https://refreshless.com/nouislider/events-callbacks/ 201 | onEnd: PropTypes.func, 202 | // https://refreshless.com/nouislider/events-callbacks/#section-set 203 | onSet: PropTypes.func, 204 | // http://refreshless.com/nouislider/events-callbacks/#section-slide 205 | onSlide: PropTypes.func, 206 | // http://refreshless.com/nouislider/events-callbacks/ 207 | onStart: PropTypes.func, 208 | // http://refreshless.com/nouislider/events-callbacks/#section-update 209 | onUpdate: PropTypes.func, 210 | // https://refreshless.com/nouislider/slider-options/#section-orientation 211 | orientation: PropTypes.oneOf(["horizontal", "vertical"]), 212 | // https://refreshless.com/nouislider/slider-options/#section-padding 213 | padding: PropTypes.oneOfType([ 214 | PropTypes.number, 215 | PropTypes.arrayOf(PropTypes.number) 216 | ]), 217 | // https://refreshless.com/nouislider/pips/ 218 | pips: PropTypes.object, 219 | // https://refreshless.com/nouislider/slider-values/#section-range 220 | range: PropTypes.object.isRequired, 221 | snap: PropTypes.bool, 222 | // https://refreshless.com/nouislider/slider-options/#section-start 223 | start: PropTypes.oneOfType([ 224 | PropTypes.number, 225 | PropTypes.string, 226 | PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])) 227 | ]).isRequired, 228 | // https://refreshless.com/nouislider/slider-options/#section-step 229 | step: PropTypes.number, 230 | style: PropTypes.objectOf(PropTypes.string), 231 | // https://refreshless.com/nouislider/slider-options/#section-tooltips 232 | tooltips: PropTypes.oneOfType([ 233 | PropTypes.bool, 234 | PropTypes.arrayOf( 235 | PropTypes.bool, 236 | PropTypes.shape({ 237 | from: PropTypes.func, 238 | to: PropTypes.func 239 | }) 240 | ) 241 | ]) 242 | }; 243 | 244 | Nouislider.defaultProps = { 245 | animate: true, 246 | behaviour: "tap", 247 | className: null, 248 | clickablePips: false, 249 | connect: false, 250 | direction: "ltr", 251 | disabled: false, 252 | format: null, 253 | margin: null, 254 | limit: null, 255 | keyboardSupport: true, 256 | id: null, 257 | instanceRef: null, 258 | padding: 0, 259 | pips: null, 260 | snap: false, 261 | step: null, 262 | style: null, 263 | orientation: "horizontal", 264 | tooltips: false, 265 | onChange: () => {}, 266 | onEnd: () => {}, 267 | onSet: () => {}, 268 | onSlide: () => {}, 269 | onStart: () => {}, 270 | onUpdate: () => {} 271 | }; 272 | 273 | export default React.memo(Nouislider, areEqual); 274 | --------------------------------------------------------------------------------