@datalayer/primer-rjsf/lib/primer/RangeWidget/RangeWidget.js

React JSON Schema Form (RJSF) for Primer

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FormControl } from "@primer/react";
import { Slider } from "@datalayer/primer-addons";
import { ariaDescribedByIds, rangeSpec, } from "@rjsf/utils";
/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
 * in a div, with the value along side it.
 *
 * @param props - The `WidgetProps` for this component
 */
export default function RangeWidget(props) {
    const { value, readonly, disabled, options, schema, onChange, label, id, } = props;
    const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
    const _onChange = (value) => {
        onChange(value ?? options.emptyValue);
    };
    return (_jsxs(_Fragment, { children: [_jsx(FormControl.Label, { htmlFor: id, children: label || schema.title }), _jsx(Slider, { disabled: disabled || readonly, onChange: _onChange, ...sliderProps, "aria-describedby": ariaDescribedByIds(id) })] }));
}