Source code
Revision control
Copy as Markdown
Other Tools
/* 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
// @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;