diff --git a/.travis.yml b/.travis.yml
index 6889a22..4332129 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-  - 6
+  -  v20.13.1
 sudo: false
 cache: yarn
diff --git a/package.json b/package.json
index d702d06..fce58db 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,12 @@
   "author": "David Chin",
   "license": "MIT",
   "devDependencies": {
-    "@types/react": "^15.0.1",
+    "@types/react": "^17.0.2",
     "autoprefixer": "^6.6.1",
     "babel-cli": "^6.22.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
+    "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -38,7 +38,7 @@
     "conventional-changelog-cli": "~1.2.0",
     "css-loader": "^0.27.3",
     "dom4": "^1.8.3",
-    "enzyme": "^2.7.1",
+    "enzyme": "^3.11.0",
     "esdoc": "^0.5.2",
     "esdoc-importpath-plugin": "^0.1.0",
     "eslint": "^3.14.0",
@@ -47,7 +47,7 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.9.0",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "extract-text-webpack-plugin": "^3.0.2",
     "jasmine-core": "^2.5.2",
     "karma": "^1.4.0",
     "karma-babel-preprocessor": "^6.0.1",
@@ -57,23 +57,22 @@
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.1",
-    "node-sass": "^4.3.0",
+    "node-sass": "^7.0.0",
     "postcss-loader": "^1.2.2",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^15.5.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^6.0.3",
+    "sass-loader": "^12.4.0",
     "sasslint-webpack-plugin": "^1.0.4",
     "style-loader": "^0.14.0",
     "uglify-js": "^2.8.16",
     "uglifyjs-webpack-plugin": "^0.3.1",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.2"
+    "webpack": "^4.39.3",
+    "webpack-dev-server": "^4.6.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^15.0.0 || ^16.0.0 || ^17.0.2",
+    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.2"
   },
   "scripts": {
     "prebuild": "npm test && rm -rf lib",
@@ -97,4 +96,4 @@
     "autobind-decorator": "^1.3.4",
     "prop-types": "^15.5.8"
   }
-}
+}
\ No newline at end of file
diff --git a/src/scss/input-range/_input-range-slider.scss b/src/scss/input-range/_input-range-slider.scss
index 190c3ca..678ed69 100644
--- a/src/scss/input-range/_input-range-slider.scss
+++ b/src/scss/input-range/_input-range-slider.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .input-range__slider {
   appearance: none;
   background: $input-range-slider-background;
@@ -6,8 +8,8 @@
   cursor: pointer;
   display: block;
   height: $input-range-slider-height;
-  margin-left: $input-range-slider-width / -2;
-  margin-top: $input-range-slider-height / -2 + $input-range-track-height / -2;
+  margin-left: math.div($input-range-slider-width, -2);
+  margin-top: math.div($input-range-slider-height, -2) + math.div($input-range-track-height, -2);
   outline: none;
   position: absolute;
   top: 50%;