1 files changed, 78 insertions, 0 deletions
diff --git a/devtools/client/performance-new/components/aboutprofiling/Range.js b/devtools/client/performance-new/components/aboutprofiling/Range.js
new file mode 100644
index 0000000000..ce787ba334
--- /dev/null
+++ b/devtools/client/performance-new/components/aboutprofiling/Range.js
@@ -0,0 +1,78 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @ts-check
+
+/**
+ * @typedef {import("../../@types/perf").ScaleFunctions} ScaleFunctions
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {number} value
+ * @property {React.ReactNode} label
+ * @property {string} id
+ * @property {ScaleFunctions} scale
+ * @property {(value: number) => unknown} onChange
+ * @property {(value: number) => React.ReactNode} display
+ */
+"use strict";
+const {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  div,
+  input,
+  label,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+/**
+ * Provide a numeric range slider UI that works off of custom numeric scales.
+ * @extends React.PureComponent<Props>
+ */
+class Range extends PureComponent {
+  /**
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  handleInput = event => {
+    event.preventDefault();
+    const { scale, onChange } = this.props;
+    const frac = Number(event.target.value) / scale.steps;
+    onChange(scale.fromFractionToSingleDigitValue(frac));
+  };
+
+  render() {
+    const { label: labelText, scale, id, value, display } = this.props;
+
+    const min = "0";
+    const max = scale.steps;
+    // Convert the value to the current range.
+    const rangeValue = scale.fromValueToFraction(value) * max;
+
+    return div(
+      { className: "perf-settings-range-row" },
+      label(
+        {
+          className: "perf-settings-label",
+          htmlFor: id,
+        },
+        labelText
+      ),
+      input({
+        type: "range",
+        className: `perf-settings-range-input`,
+        min,
+        "aria-valuemin": scale.fromFractionToValue(0),
+        max,
+        "aria-valuemax": scale.fromFractionToValue(1),
+        value: rangeValue,
+        "aria-valuenow": value,
+        onChange: this.handleInput,
+        id,
+      }),
+      div({ className: `perf-settings-range-value` }, display(value))
+    );
+  }
+}
+
+module.exports = Range;