Use Sass math.div

darlanrod · Jul 13, 2022 · f7394ac · f7394ac
1 parent b913aef
commit f7394ac
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/_inputrange.scss b/_inputrange.scss
@@ -1,9 +1,11 @@
 // Styling Cross-Browser Compatible Range Inputs with Sass
 // Github: https://github.com/darlanrod/input-range-sass
 // Author: Darlan Rod https://github.com/darlanrod
-// Version 1.5.2
+// Version 1.5.3
 // MIT License
 
+@use 'sass:math';
+
 $track-color: #eceff1 !default;
 $thumb-color: #607d8b !default;
 
@@ -54,7 +56,7 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
 [type='range'] {
   -webkit-appearance: none;
   background: transparent;
-  margin: $thumb-height / 2 0;
+  margin: math.div($thumb-height, 2) 0;
   width: $track-width;
 
   &::-moz-focus-outer {
@@ -88,7 +90,7 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
   &::-webkit-slider-thumb {
     @include thumb;
     -webkit-appearance: none;
-    margin-top: ((-$track-border-width * 2 + $track-height) / 2 - $thumb-height / 2);
+    margin-top: (math.div((-$track-border-width * 2 + $track-height), 2) - math.div($thumb-height, 2));
   }
 
   &::-moz-range-track {
@@ -97,7 +99,7 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
     background: $track-color;
     border: $track-border-width solid $track-border-color;
     border-radius: $track-radius;
-    height: $track-height / 2;
+    height: math.div($track-height, 2);
   }
 
   &::-moz-range-thumb {
@@ -108,7 +110,7 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
     @include track;
     background: transparent;
     border-color: transparent;
-    border-width: ($thumb-height / 2) 0;
+    border-width: math.div($thumb-height, 2) 0;
     color: transparent;
   }
 
@@ -128,7 +130,7 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
 
   &::-ms-thumb {
     @include thumb;
-    margin-top: $track-height / 4;
+    margin-top: math.div($track-height, 4);
   }
 
   &:disabled {

diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,9 @@
 # Changelog
 _Styling Cross-Browser Compatible Range Inputs with Sass / SCSS_
 
+## 1.5.3
+-   Use of Sass's `math.div` on SCSS file. (thanks [Mitch J.](https://github.com/toBeOfUse))
+
 ## 1.5.2
 -   Range track and thumb tweaks for Mozilla Firefox. (thanks [Adam Jagosz](https://github.com/hyvyys))
 

diff --git a/example/index.html b/example/index.html
@@ -7,9 +7,7 @@
     <title>Styling Cross-Browser Compatible Range Inputs with Sass/SCSS</title>
     <link href="inputrange.css" rel="stylesheet">
     <style>
-      div {
-        margin: 20px;
-      }
+      div {margin: 20px;}
     </style>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "input-range-scss",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Sass component for customizing the input range using the native properties of each browser.",
   "main": "_inputrange.scss",
   "style": "_inputrange.scss",