react-slider | Accessible , CSS agnostic , slider component for React | Animation library

Im trying to change the style whenever ReactSlider is changed. I want to add for example brightness when slider is increased in React. I did it but I cannot seem to get the styles to be added to the image whenever the slider goes through the onchange event. Here is the code:

I want to re-render the child component which uses state of parent component as props.

My scenario: And using a react-slick slider to show images on a page, and it has a prop initial slide accoding which slider show initial slide. I am using useState() to maintain initialSlide value, There is another trigger on page which updates initialSlide value and when I update initialSlide value it does not re-render react-slider.

Please check demo code below: Demo

In above demo, click on button> currentSlide value updates> react-slider does not update.

Is there a way to achieve this in react, I tries same using redux store but child component never re-renders.

I am seeing this issue 100% of the attempts at building webpack for production. I've tried the approach mentioned on the other similar StackOverflow issues which is NODE_OPTIONS=--max_old_space_size=8192

my build command is:

NPM seems to either not be recognizing or not be installing the packages listed in my package.json. I keep getting warnings which are preventing my build from passing which is a large issue. specifically:

npm WARN react-datepicker@0.49.0 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-datepicker@0.49.0 requires a peer of react-dom@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-modal@2.4.1 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-modal@2.4.1 requires a peer of react-dom@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.

This warning is confusing for me considering my react dependency is 16.5.0, well beyond ^14.0 or ^15.0. Everything I have looked up has said to delete node_modules and package.json.lock then run npm install but this does not seem to solve the problem or change anything really. Any help would be much appreciated.

here is a copy of my package.json

{ "version": "0.1.0", "private": true, "proxy": "http://localhost:3001", "devDependencies": { "axios-mock-adapter": "^1.13.1", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.1", "husky": "^0.13.4", "lint-staged": "^3.6.1", "node-sass-chokidar": "0.0.3", "npm-run-all": "^4.0.2", "prettier": "^1.10.2", "react-scripts": "^1.1.4", "react-test-renderer": "^16.0.0", "redux-mock-store": "^1.5.1", "redux-testkit": "^1.0.6" }, "dependencies": { "axios": "^0.16.2", "babel-polyfill": "^6.26.0", "big.js": "^5.0.3", "class-names": "^1.0.0", "create-app": "^0.6.0", "d3": "^5.5.0", "d3-array": "^1.2.1", "d3-scale": "^1.0.6", "debounce": "^1.0.2", "font-awesome": "^4.7.0", "jest-enzyme": "^4.0.1", "leaflet": "^1.0.3", "lodash": "^4.17.10", "lodash.throttle": "^4.1.1", "mixpanel-browser": "^2.13.0", "moment": "^2.18.1", "mousetrap": "^1.6.1", "numeral": "^2.0.6", "polyline-encoded": "^0.0.8", "prop-types": "^15.5.10", "query-string": "^5.0.0", "raven-js": "^3.17.0", "rc-trigger": "^1.11.2", "react": "^16.5.0", "react-bootstrap": "^0.32.0", "react-countup": "^2.1.1", "react-custom-scrollbars": "^4.1.2", "react-datepicker": "^0.49.0", "react-dom": "^16.5.0", "react-fontawesome": "^1.6.1", "react-gravatar": "^2.6.3", "react-leaflet": "^1.3.0", "react-list": "^0.8.6", "react-markdown": "^2.5.1", "react-modal": "^2.3.2", "react-redux": "^5.0.5", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", "react-slider": "^0.8.0", "react-sortable-hoc": "^0.6.5", "react-transition-group": "1.x", "redux": "^3.6.0", "redux-form": "^7.0.0", "redux-logger": "^3.0.6", "redux-thunk": "^2.2.0", "reselect": "^3.0.1", "yarn": "^1.3.2" }, "scripts": { "build": "yarn run build-css && react-scripts build", "build-css": "npm rebuild node-sass && node-sass-chokidar --include-path ./src --include-path ./node_modules ./src/ -o ./src/", "deploy": "./deploy.sh", "eject": "react-scripts eject", "precommit": "lint-staged", "start": "npm-run-all -p watch-css start-js", "start-js": "react-scripts start", "test": "react-scripts test --env=jsdom", "watch-css": "yarn run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules ./src/ -o ./src/ --watch --recursive" }, "lint-staged": { "*.js": [ "prettier --single-quote --write", "git add", "prettier --write" ] } }

i have a range bar which i create from react-slider. I want to use it in a redux-form. My problem is that the values are not returning. To be more specific when i sumbit my form the other fields return values while this range bar returns undefined. How do i have to use the Range in a redux-form?? My code is