@splunk/react-ui 4.40.0 → 4.41.0

package/Slider.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,16 +56,16 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        default: () => /* reexport */ te
+        e.d(r, {
+        default: () => /* reexport */ se
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
     var a =  e.n(i);
@@ -77,150 +77,150 @@
     var u =  e.n(s);
     // CONCATENATED MODULE: external "lodash/keys"
     const c = require("lodash/keys");
-    var p =  e.n(c);
+    var d =  e.n(c);
     // CONCATENATED MODULE: external "lodash/omit"
-    const d = require("lodash/omit");
-    var f =  e.n(d);
+    const p = require("lodash/omit");
+    var v =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const v = require("@splunk/ui-utils/keyboard");
+    const f = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const h = require("@splunk/themes");
+    const m = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
     const b = require("@splunk/react-ui/EventListener");
-    var m =  e.n(b);
+    var h =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
     const y = require("@splunk/react-ui/Popover");
     var g =  e.n(y);
     // CONCATENATED MODULE: external "styled-components"
-    const k = require("styled-components");
-    var w =  e.n(k);
+    const x = require("styled-components");
+    var w =  e.n(x);
     // CONCATENATED MODULE: external "tinycolor2"
-    const x = require("tinycolor2");
-    var S =  e.n(x);
+    const k = require("tinycolor2");
+    var S =  e.n(k);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const T = require("@splunk/react-ui/Box");
-    var C =  e.n(T);
+    const C = require("@splunk/react-ui/Box");
+    var T =  e.n(C);
     // CONCATENATED MODULE: ./src/Slider/SliderStyles.ts
-    var O = w()(C()).withConfig({
+    var M = w()(T()).withConfig({
         displayName: "SliderStyles__StyledBox",
         componentId: "sc-16ooit4-0"
-    })([ "", ";flex:1 1 auto;&[data-inline]{width:300px;}" ], h.mixins.reset("block"));
-    var E = w().div.withConfig({
+    })([ "", ";flex:1 1 auto;&[data-inline]{width:300px;}" ], m.mixins.reset("block"));
+    var O = w().div.withConfig({
         displayName: "SliderStyles__StyledInput",
         componentId: "sc-16ooit4-1"
-    })([ "flex:1 0 0;vertical-align:middle;position:relative;cursor:default;height:", ";max-width:100%;" ], h.variables.inputHeight);
-    var V = "1px";
+    })([ "flex:1 0 0;vertical-align:middle;position:relative;cursor:default;height:", ";max-width:100%;" ], m.variables.inputHeight);
+    var _ = "1px";
     var B = w().div.withConfig({
         displayName: "SliderStyles__StyledSliderBar",
         componentId: "sc-16ooit4-2"
     })([ "position:absolute;top:", ";left:0;height:", ";width:100%;border-radius:2.5px;", "" ], (0, 
-    h.pick)({
+    m.pick)({
         enterprise: "12px",
         prisma: "18px"
-    }), (0, h.pick)({
+    }), (0, m.pick)({
         enterprise: "5px",
         prisma: "4px"
     }), (function(e) {
-        var t = e.$disabled, r = e.$error, n = e.$position, i = e.$stepMarksWidth;
-        if (t) {
-            return (0, k.css)([ "background-color:", ";" ], (0, h.pick)({
-                enterprise: h.variables.gray92,
-                prisma: h.variables.contentColorDisabled
+        var r = e.$disabled, t = e.$error, n = e.$position, i = e.$stepMarksWidth;
+        if (r) {
+            return (0, x.css)([ "background-color:", ";" ], (0, m.pick)({
+                enterprise: m.variables.gray92,
+                prisma: m.variables.contentColorDisabled
             }));
         }
-        var a = r ? h.variables.accentColorNegative : (0, h.pick)({
-            prisma: h.variables.contentColorActive,
+        var a = t ? m.variables.accentColorNegative : (0, m.pick)({
+            prisma: m.variables.contentColorActive,
             enterprise: {
-                light: h.variables.gray22,
-                dark: h.variables.white
+                light: m.variables.gray22,
+                dark: m.variables.white
             }
         });
-        var o = (0, h.pick)({
+        var o = (0, m.pick)({
             enterprise: {
-                dark: h.variables.gray20,
-                light: h.variables.gray96
+                dark: m.variables.gray20,
+                light: m.variables.gray96
             },
-            prisma: h.variables.neutral100
+            prisma: m.variables.neutral100
         });
-        var l = (0, h.pick)({
-            enterprise: h.variables.gray60,
-            prisma: h.variables.interactiveColorBorder
+        var l = (0, m.pick)({
+            enterprise: m.variables.gray60,
+            prisma: m.variables.interactiveColorBorder
         });
-        return i !== undefined ? (0, k.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], a, a, V, V, o, o, V, V, i, a, a, n, l, n, l) : (0, 
-        k.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], a, a, n, l, n, l);
+        return i !== undefined ? (0, x.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], a, a, _, _, o, o, _, _, i, a, a, n, l, n, l) : (0, 
+        x.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], a, a, n, l, n, l);
     }));
-    var M = (0, h.pick)({
+    var E = (0, m.pick)({
         enterprise: 18,
         prisma: 20
     });
-    var _ = w().button.withConfig({
+    var j = w().button.withConfig({
         displayName: "SliderStyles__StyledSliderThumb",
         componentId: "sc-16ooit4-3"
-    })([ "", ";display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:", ";border-width:0;background-color:", ";margin-left:-8px;top:", ";left:", "%;&:hover:not([disabled]){outline:0;z-index:1;", "}&:focus:not([disabled]),&:active{outline:0;box-shadow:", ";z-index:1;", "}&[disabled]{cursor:not-allowed;background-color:", ";}", "" ], h.mixins.reset("inline"), M, M, (0, 
-    h.pick)({
+    })([ "", ";display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:", ";border-width:0;background-color:", ";margin-left:-8px;top:", ";left:", "%;&:hover:not([disabled]){outline:0;z-index:1;", "}&:focus:not([disabled]),&:active{outline:0;box-shadow:", ";z-index:1;", "}&[disabled]{cursor:not-allowed;background-color:", ";}", "" ], m.mixins.reset("inline"), E, E, (0, 
+    m.pick)({
         enterprise: "9px",
         prisma: "10px"
-    }), (0, h.pick)({
+    }), (0, m.pick)({
         enterprise: {
-            light: h.variables.gray22,
-            dark: h.variables.white
+            light: m.variables.gray22,
+            dark: m.variables.white
         },
-        prisma: h.variables.contentColorActive
-    }), (0, h.pick)({
+        prisma: m.variables.contentColorActive
+    }), (0, m.pick)({
         enterprise: "6px",
         prisma: "10px"
     }), (function(e) {
-        var t = e.$position;
-        return t;
-    }), (0, h.pick)({
-        enterprise: (0, k.css)([ "box-shadow:", ";" ], h.variables.focusShadow)
-    }), h.variables.focusShadow, (0, h.pick)({
-        prisma: (0, k.css)([ "background-color:", ";" ], h.mixins.overlayColors(h.variables.contentColorActive, h.variables.interactiveColorOverlayActive)),
-        enterprise: (0, k.css)([ "border-color:", ";" ], (function(e) {
-            return S()(h.variables.focusColor(e)).setAlpha(.8).toRgbString();
+        var r = e.$position;
+        return r;
+    }), (0, m.pick)({
+        enterprise: (0, x.css)([ "box-shadow:", ";" ], m.variables.focusShadow)
+    }), m.variables.focusShadow, (0, m.pick)({
+        prisma: (0, x.css)([ "background-color:", ";" ], m.mixins.overlayColors(m.variables.contentColorActive, m.variables.interactiveColorOverlayActive)),
+        enterprise: (0, x.css)([ "border-color:", ";" ], (function(e) {
+            return S()(m.variables.focusColor(e)).setAlpha(.8).toRgbString();
         }))
-    }), (0, h.pick)({
-        enterprise: h.variables.gray92,
-        prisma: h.variables.neutral400
+    }), (0, m.pick)({
+        enterprise: m.variables.gray92,
+        prisma: m.variables.neutral400
     }), (function(e) {
-        var t = e.$error;
-        return t && (0, k.css)([ "background-color:", ";&:focus:not([disabled]),&:active{background-color:", ";}" ], h.variables.accentColorNegative, (0, 
-        h.pick)({
-            enterprise: h.variables.errorColorD40,
-            prisma: h.mixins.overlayColors(h.variables.accentColorNegative, h.variables.interactiveColorOverlayActive)
+        var r = e.$error;
+        return r && (0, x.css)([ "background-color:", ";&:focus:not([disabled]),&:active{background-color:", ";}" ], m.variables.accentColorNegative, (0, 
+        m.pick)({
+            enterprise: m.variables.errorColorD40,
+            prisma: m.mixins.overlayColors(m.variables.accentColorNegative, m.variables.interactiveColorOverlayActive)
         }));
     }));
     var P = w().div.withConfig({
         displayName: "SliderStyles__StyledPopoverContent",
         componentId: "sc-16ooit4-4"
-    })([ "padding:", ";font-size:", ";line-height:", ";" ], (0, h.pick)({
-        enterprise: h.variables.spacingSmall,
+    })([ "padding:", ";font-size:", ";line-height:", ";" ], (0, m.pick)({
+        enterprise: m.variables.spacingSmall,
         prisma: "12px 16px"
-    }), (0, h.pick)({
-        enterprise: h.variables.fontSizeSmall,
+    }), (0, m.pick)({
+        enterprise: m.variables.fontSizeSmall,
         prisma: "14px"
-    }), (0, h.pick)({
+    }), (0, m.pick)({
         enterprise: "18px",
         prisma: "24px"
     }));
-    var j = (0, k.css)([ "flex:0 0 auto;line-height:", ";", "" ], h.variables.inputHeight, (function(e) {
-        var t = e.$disabled;
-        return t && (0, k.css)([ "color:", ";" ], (0, h.pick)({
-            enterprise: h.variables.textDisabledColor,
-            prisma: h.variables.contentColorDisabled
+    var q = (0, x.css)([ "flex:0 0 auto;line-height:", ";", "" ], m.variables.inputHeight, (function(e) {
+        var r = e.$disabled;
+        return r && (0, x.css)([ "color:", ";" ], (0, m.pick)({
+            enterprise: m.variables.textDisabledColor,
+            prisma: m.variables.contentColorDisabled
         }));
     }));
-    var q = w()(C()).withConfig({
+    var D = w()(T()).withConfig({
         displayName: "SliderStyles__StyledMinLabelBox",
         componentId: "sc-16ooit4-5"
-    })([ "", ";margin-right:", ";text-align:right;" ], j, (0, h.pick)({
+    })([ "", ";margin-right:", ";text-align:right;" ], q, (0, m.pick)({
         enterprise: "15px",
         prisma: "16px"
     }));
-    var D = w()(C()).withConfig({
+    var $ = w()(T()).withConfig({
         displayName: "SliderStyles__StyledMaxLabelBox",
         componentId: "sc-16ooit4-6"
-    })([ "", ";margin-left:", ";text-align:left;" ], j, (0, h.pick)({
+    })([ "", ";margin-left:", ";text-align:left;" ], q, (0, m.pick)({
         enterprise: "15px",
         prisma: "16px"
     }));
@@ -233,35 +233,35 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, N(e);
     }
-    function $() {
-        return $ = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    function V() {
+        return V = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, $.apply(null, arguments);
+        }, V.apply(null, arguments);
     }
-    function F(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function L(e, r) {
+        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
     }
-    function I(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
+    function R(e, r) {
+        for (var t = 0; t < r.length; t++) {
+            var n = r[t];
             n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
             Object.defineProperty(e, G(n.key), n);
         }
     }
-    function L(e, t, r) {
-        return t && I(e.prototype, t), r && I(e, r), Object.defineProperty(e, "prototype", {
+    function F(e, r, t) {
+        return r && R(e.prototype, r), t && R(e, t), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
     }
-    function R(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
+    function I(e, r) {
+        if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
+        e.prototype = Object.create(r && r.prototype, {
             constructor: {
                 value: e,
                 writable: !0,
@@ -269,27 +269,27 @@
             }
         }), Object.defineProperty(e, "prototype", {
             writable: !1
-        }), t && A(e, t);
+        }), r && A(e, r);
     }
-    function A(e, t) {
-        return A = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, A(e, t);
+    function A(e, r) {
+        return A = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
+            return e.__proto__ = r, e;
+        }, A(e, r);
     }
-    function W(e) {
-        var t = U();
+    function z(e) {
+        var r = U();
         return function() {
-            var r, n = H(e);
-            if (t) {
+            var t, n = H(e);
+            if (r) {
                 var i = H(this).constructor;
-                r = Reflect.construct(n, arguments, i);
-            } else r = n.apply(this, arguments);
-            return z(this, r);
+                t = Reflect.construct(n, arguments, i);
+            } else t = n.apply(this, arguments);
+            return W(this, t);
         };
     }
-    function z(e, t) {
-        if (t && ("object" == N(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
+    function W(e, r) {
+        if (r && ("object" == N(r) || "function" == typeof r)) return r;
+        if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
         return K(e);
     }
     function K(e) {
@@ -300,7 +300,7 @@
         try {
             var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
         } catch (e) {}
-        return (U = function t() {
+        return (U = function r() {
             return !!e;
         })();
     }
@@ -309,27 +309,27 @@
             return e.__proto__ || Object.getPrototypeOf(e);
         }, H(e);
     }
-    function X(e, t, r) {
-        return (t = G(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
+    function X(e, r, t) {
+        return (r = G(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[t] = r, e;
+        }) : e[r] = t, e;
     }
     function G(e) {
-        var t = J(e, "string");
-        return "symbol" == N(t) ? t : t + "";
+        var r = J(e, "string");
+        return "symbol" == N(r) ? r : r + "";
     }
-    function J(e, t) {
+    function J(e, r) {
         if ("object" != N(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
             if ("object" != N(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
-        return ("string" === t ? String : Number)(e);
+        return ("string" === r ? String : Number)(e);
     }
     /** @public */    var Q = {
         defaultValue: a().number,
@@ -355,41 +355,97 @@
         value: a().number
     };
     var Y = {
-        disabled: false,
-        error: false,
-        inline: false,
         min: 1,
         max: 5,
         step: 1,
         stepMarks: "focus"
     };
-    var Z =  function(e) {
-        R(r, e);
-        var t = W(r);
+    var Z = function e(r) {
+        var t = r.max, n = r.min, i = r.value;
+        if (i > t) {
+            return t;
+        }
+        if (i < n) {
+            return n;
+        }
+        return i;
+    };
+    // If the current value is in between a step, i.e. defaultValue is not at a
+    // step mark, this function handles navigating to the next correct step
+        var ee = function e(r) {
+        var t = r.direction, n = r.min, i = r.step, a = r.value;
+        var o = new (l())(a).minus(n).modulo(i).toNumber();
+        if (o > 0) {
+            return t === "forward" ? i - o : o;
+        }
+        return i;
+    };
+    var re = function e(r, t) {
+        if (t === null) {
+            return undefined;
+        }
+        var n = t.getBoundingClientRect();
+        var i = r.clientX - n.left;
+        return Z({
+            max: 100,
+            min: 0,
+            value: i / n.width * 100
+        });
+    };
+    var te = function e(r) {
+        var t = r.max, n = r.min, i = r.step, a = r.value;
+        // Handles if the max is in between steps but val is larger than the halfway point between last step mark and max
+                if (a > t - (t - n) % i / 2) {
+            return t;
+        }
+        return new (l())(a).minus(n).div(i).todp(0).mul(i).add(n).toNumber();
+    };
+    var ne = function e(r) {
+        var t = r.position, n = r.max, i = r.min, a = r.step;
+        var o = n - i;
+        var l = t / 100 * o + i;
+        return te({
+            max: n,
+            min: i,
+            step: a,
+            value: l
+        });
+    };
+    var ie = function e(r) {
+        var t = r.max, n = r.min, i = r.sliderBar, a = r.step, o = r.thumbWidth;
+        // don't render stepMarks if they are too small i.e. stepWidth is less than SliderThumb divided by 2
+        // in that case, undefined is returned
+                if (i === null) {
+            return undefined;
+        }
+        var l = t - n;
+        var s = Math.round(l / a);
+        var u = i.getBoundingClientRect();
+        var c = a * 100 / l;
+        return u.width / s > o / 2 ? c : undefined;
+    };
+    var ae = function e(r) {
+        var t = r.max, n = r.min, i = r.value;
+        if (i === undefined) {
+            return undefined;
+        }
+        var a = t - n;
+        return (i - n) / a * 100;
+    };
+    var oe =  function(e) {
+        I(t, e);
+        var r = z(t);
         // @docs-props-type SliderPropsBase
-                function r(e) {
+                function t(e) {
             var n;
-            F(this, r);
-            n = t.call(this, e);
+            L(this, t);
+            n = r.call(this, e);
             X(K(n), "controlledExternally", void 0);
             X(K(n), "sliderThumb", null);
-            X(K(n), "checkPositionBounds", (function(e) {
-                if (e > 100) {
-                    return 100;
-                }
-                if (e < 0) {
-                    return 0;
-                }
-                return e;
-            }));
-            X(K(n), "checkValueBounds", (function(e) {
-                if (e > n.props.max) {
-                    return n.props.max;
-                }
-                if (e < n.props.min) {
-                    return n.props.min;
-                }
-                return e;
+            X(K(n), "handleMount", (function(e) {
+                n.setState({
+                    sliderBar: e
+                });
             }));
             X(K(n), "handleBlur", (function() {
                 n.setState({
@@ -397,56 +453,74 @@
                     showTooltip: false
                 });
             }));
-            X(K(n), "handleClick", (function(e) {
-                var t = n.percentageFromEvent(e);
-                if (t !== undefined) {
-                    var r = n.roundValueToStep(n.positionToValue(t));
-                    n.setValue(e, {
-                        value: r
-                    });
-                }
-            }));
             X(K(n), "handleFocus", (function() {
                 n.setState({
                     isFocused: true,
                     showTooltip: true
                 });
             }));
-            X(K(n), "getValueOffset", (function(e, t) {
-                var r = n.props, i = r.min, a = r.step;
-                var o = new (l())(e).minus(i).modulo(a).toNumber();
-                if (o > 0) {
-                    return t === "forward" ? a - o : o;
+            X(K(n), "handleClick", (function(e) {
+                var r = re(e, n.state.sliderBar);
+                if (r !== undefined) {
+                    var t = n.props, i = t.max, a = t.min, o = t.step;
+                    var l = ne({
+                        position: r,
+                        max: i,
+                        min: a,
+                        step: o
+                    });
+                    n.setValue(e, {
+                        value: l
+                    });
                 }
-                return a;
             }));
             X(K(n), "handleKeyDown", (function(e) {
-                var t = n.getValue();
-                if (t !== undefined) {
-                    if ((0, v.keycode)(e.nativeEvent) === "right") {
-                        t = n.checkValueBounds(t + n.getValueOffset(t, "forward"));
-                    } else if ((0, v.keycode)(e.nativeEvent) === "left") {
-                        t = n.checkValueBounds(t - n.getValueOffset(t, "backward"));
-                    } else if ((0, v.keycode)(e.nativeEvent) === "up") {
+                var r = n.getValue();
+                if (r !== undefined) {
+                    var t = (0, f.keycode)(e.nativeEvent);
+                    var i = n.props, a = i.min, o = i.max, l = i.step;
+                    var s;
+                    var u = ee({
+                        direction: "forward",
+                        min: a,
+                        step: l,
+                        value: r
+                    });
+                    var c = ee({
+                        direction: "backward",
+                        min: a,
+                        step: l,
+                        value: r
+                    });
+                    if (t === "right") {
+                        s = r + u;
+                    } else if (t === "left") {
+                        s = r - c;
+                    } else if (t === "up") {
                         e.preventDefault();
-                        t = n.checkValueBounds(t + n.getValueOffset(t, "forward"));
-                    } else if ((0, v.keycode)(e.nativeEvent) === "down") {
+                        s = r + u;
+                    } else if (t === "down") {
                         e.preventDefault();
-                        t = n.checkValueBounds(t - n.getValueOffset(t, "backward"));
+                        s = r - c;
                     } else {
                         return;
                     }
-                    t = n.roundValueToStep(t);
+                    r = Z({
+                        max: o,
+                        min: a,
+                        value: s
+                    });
+                    r = te({
+                        max: o,
+                        min: a,
+                        step: l,
+                        value: r
+                    });
                     n.setValue(e, {
-                        value: t
+                        value: r
                     });
                 }
             }));
-            X(K(n), "handleMount", (function(e) {
-                n.setState({
-                    sliderBar: e
-                });
-            }));
             X(K(n), "handleMouseDown", (function(e) {
                 e.preventDefault();
                 n.focus();
@@ -469,11 +543,17 @@
             }));
             X(K(n), "handleMouseMove", (function(e) {
                 if (n.state.selected) {
-                    var t = n.percentageFromEvent(e);
-                    if (t !== undefined) {
-                        var r = n.roundValueToStep(n.positionToValue(t));
+                    var r = re(e, n.state.sliderBar);
+                    var t = n.props, i = t.max, a = t.min, o = t.step;
+                    if (r !== undefined) {
+                        var l = ne({
+                            position: r,
+                            min: a,
+                            max: i,
+                            step: o
+                        });
                         n.setValue(e, {
-                            value: r
+                            value: l
                         });
                     }
                 }
@@ -484,49 +564,28 @@
                     showTooltip: false
                 });
             }));
-            X(K(n), "percentageFromEvent", (function(e) {
-                if (n.state.sliderBar === null) {
-                    return undefined;
-                }
-                var t = n.state.sliderBar.getBoundingClientRect();
-                var r = e.clientX - t.left;
-                return n.checkPositionBounds(r / t.width * 100);
-            }));
-            X(K(n), "positionToValue", (function(e) {
-                var t = n.props.max - n.props.min;
-                return e / 100 * t + n.props.min;
-            }));
-            X(K(n), "roundValueToStep", (function(e) {
-                var t = n.props, r = t.step, i = t.min, a = t.max;
- // Handles if the max is in between steps but val is larger than the halfway point between last step mark and max
-                                if (e > a - (a - i) % r / 2) {
-                    return a;
-                }
-                return new (l())(e).minus(i).div(r).todp(0).mul(r).add(i).toNumber();
-            }));
-            X(K(n), "valueToPosition", (function(e) {
-                if (e === undefined) {
-                    return undefined;
-                }
-                var t = n.props.max - n.props.min;
-                return (e - n.props.min) / t * 100;
-            }));
             n.controlledExternally = u()(e, "value");
-            var i = u()(e, "defaultValue") ? e.defaultValue : n.roundValueToStep((e.max - e.min) / 2);
+            var i = e.defaultValue, a = e.max, o = e.min, l = e.step;
+            var s = u()(e, "defaultValue") ? i : te({
+                max: a,
+                min: o,
+                step: l,
+                value: (a - o) / 2
+            });
             n.state = {
                 isFocused: false,
                 selected: false,
                 showTooltip: false,
                 sliderBar: null,
-                value: n.isControlled() ? undefined : i
+                value: n.isControlled() ? undefined : s
             };
             if (false) {}
-            if (e.min >= e.max && process.env.NODE_ENV !== "production") {}
+            if (false) {}
             return n;
         }
-        L(r, [ {
+        F(t, [ {
             key: "componentDidUpdate",
-            value: function e(t) {
+            value: function e(r) {
                 if (false) {}
                 if (false) {}
             }
@@ -537,15 +596,14 @@
             }
         }, {
             key: "setValue",
-            value: function e(t, r) {
-                var n = r.value;
-                var i = this.getValue();
-                var a = this.props.name;
-                if (i !== n) {
-                    var o, l;
-                    (o = (l = this.props).onChange) === null || o === void 0 ? void 0 : o.call(l, t, {
+            value: function e(r, t) {
+                var n = t.value;
+                var i = this.props.name;
+                if (this.getValue() !== n) {
+                    var a, o;
+                    (a = (o = this.props).onChange) === null || a === void 0 ? void 0 : a.call(o, r, {
                         value: n,
-                        name: a
+                        name: i
                     });
                     if (!this.isControlled()) {
                         this.setState({
@@ -554,36 +612,14 @@
                     }
                 }
             }
- // If the current value is in between a step, i.e. defaultValue is not at a
-            // step mark, this function handles navigating to the next correct step
-                }, {
+        }, {
             key: "focus",
             /**
      * Places focus on the slider.
      */
             value: function e() {
-                var t;
-                (t = this.sliderThumb) === null || t === void 0 ? void 0 : t.focus();
-            }
-        }, {
-            key: "stepWidthInPercentage",
-            value: function e() {
-                return this.props.step * 100 / (this.props.max - this.props.min);
-            }
-        }, {
-            key: "stepMarksWidth",
-            value: function e() {
-                // don't render stepMarks if they are too small i.e. stepWidth is less than SliderThumb divided by 2
-                // in that case, undefined is returned
-                var t = this.props, r = t.max, n = t.min, i = t.step, a = t.splunkTheme;
-                var o = this.state.sliderBar;
-                if (o === null) {
-                    return undefined;
-                }
-                var l = Math.round((r - n) / i);
-                var s = o.getBoundingClientRect();
-                var u = M(a);
-                return s.width / l > u / 2 ? this.stepWidthInPercentage() : undefined;
+                var r;
+                (r = this.sliderThumb) === null || r === void 0 ? void 0 : r.focus();
             }
         }, {
             key: "isControlled",
@@ -593,49 +629,59 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this;
-                var i = this.props, a = i.describedBy, o = i.disabled, l = i.displayValue, s = i.elementRef, u = i.error, c = i.inline, d = i.labelledBy, v = i.max, h = i.maxLabel, b = i.min, y = i.minLabel, k = i.required, w = i.stepMarks;
-                var x = this.state, S = x.isFocused, T = x.selected, C = x.sliderBar;
-                var V = this.getValue();
-                var M = this.valueToPosition(V);
-                var j = w === "focus" && S || w === "always";
-                var N = j && C ? this.stepMarksWidth() : undefined;
-                var F = f()(this.props, p()(r.propTypes));
+                var r = this;
+                var i = this.props, a = i.describedBy, o = i.disabled, l = i.displayValue, s = i.elementRef, u = i.error, c = i.inline, p = i.labelledBy, f = i.max, m = i.maxLabel, b = i.min, y = i.minLabel, x = i.required, w = i.step, k = i.stepMarks, S = i.splunkTheme;
+                var C = this.state, T = C.isFocused, _ = C.selected, q = C.sliderBar;
+                var N = this.getValue();
+                var L = ae({
+                    value: N,
+                    min: b,
+                    max: f
+                });
+                var R = k === "focus" && T || k === "always";
+                var F = R && q ? ie({
+                    max: f,
+                    min: b,
+                    sliderBar: q,
+                    step: w,
+                    thumbWidth: E(S)
+                }) : undefined;
+                var I = v()(this.props, d()(t.propTypes));
                 /* eslint-disable jsx-a11y/no-static-element-interactions */                
-                return n().createElement(O, $({
+                return n().createElement(M, V({
                     "data-test": "slider",
-                    "data-test-value": V,
+                    "data-test-value": N,
                     elementRef: s,
                     flex: true,
                     inline: c
-                }, F), T &&  n().createElement(n().Fragment, null,  n().createElement(m(), {
+                }, I), _ &&  n().createElement(n().Fragment, null,  n().createElement(h(), {
                     target: window,
                     eventType: "mouseup",
                     listener: this.handleMouseUp
-                }),  n().createElement(m(), {
+                }),  n().createElement(h(), {
                     target: window,
                     eventType: "mousemove",
                     listener: this.handleMouseMove
-                })), y !== null &&  n().createElement(q, {
+                })), y !== null &&  n().createElement(D, {
                     "data-test": "min-label",
                     $disabled: o
-                }, y || b),  n().createElement(E, {
+                }, y || b),  n().createElement(O, {
                     onClick: o ? undefined : this.handleClick
                 },  n().createElement(B, {
-                    "aria-required": k,
+                    "aria-required": x,
                     "data-test": "bar",
                     $disabled: o,
                     ref: this.handleMount,
                     $error: u,
-                    $position: M,
-                    $stepMarksWidth: N
-                }),  n().createElement(_, {
+                    $position: L,
+                    $stepMarksWidth: F
+                }),  n().createElement(j, {
                     "aria-describedby": a,
-                    "aria-labelledby": d,
+                    "aria-labelledby": p,
                     "aria-invalid": u,
-                    "aria-valuemax": v,
+                    "aria-valuemax": f,
                     "aria-valuemin": b,
-                    "aria-valuenow": V,
+                    "aria-valuenow": N,
                     "data-test": "handle",
                     onBlur: this.handleBlur,
                     onMouseEnter: this.handleMouseEnter,
@@ -643,31 +689,31 @@
                     onKeyDown: o ? undefined : this.handleKeyDown,
                     onMouseDown: o ? undefined : this.handleMouseDown,
                     onFocus: this.handleFocus,
-                    ref: function e(r) {
-                        t.sliderThumb = r;
+                    ref: function e(t) {
+                        r.sliderThumb = t;
                     },
                     role: "slider",
                     disabled: o,
                     $error: u,
-                    $position: M
+                    $position: L
                 }),  n().createElement(g(), {
                     open: this.state.showTooltip,
                     anchor: this.sliderThumb,
                     appearance: "inverted",
                     align: "center"
-                },  n().createElement(P, null, l || V))), h !== null &&  n().createElement(D, {
+                },  n().createElement(P, null, l || N))), m !== null &&  n().createElement($, {
                     "data-test": "max-label",
                     $disabled: o
-                }, h || v));
+                }, m || f));
                 /* eslint-enable jsx-a11y/no-static-element-interactions */            }
         } ]);
-        return r;
-    }(r.Component);
-    X(Z, "propTypes", Q);
-    X(Z, "defaultProps", Y);
-    var ee = (0, h.withSplunkTheme)(Z);
-    ee.propTypes = Z.propTypes;
-    /* harmony default export */    const te = ee;
+        return t;
+    }(t.Component);
+    X(oe, "propTypes", Q);
+    X(oe, "defaultProps", Y);
+    var le = (0, m.withSplunkTheme)(oe);
+    le.propTypes = oe.propTypes;
+    /* harmony default export */    const se = le;
     // CONCATENATED MODULE: ./src/Slider/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();