@seidhr/sanity-plugin-muna-schemas/src/components/slider/Slider.js

Muna or ᛗᚢᚾᚨ means remember in norse. Muna is a schema for the Sanity Studio that enables detailed descriptions of cultural heritage objects and knowledge about their contexts as well as pages about them (or anything else really.)

import PropTypes from 'prop-types'
import React from 'react'
import FormField from 'part:@sanity/components/formfields/default'
import PatchEvent, { set, unset } from '@sanity/form-builder/PatchEvent'
import styles from './slider.css'

export default class Slider extends React.Component {
  static propTypes = {
    type: PropTypes.shape({
      title: PropTypes.string,
      description: PropTypes.string,
      options: PropTypes.shape({
        range: PropTypes.shape({
          min: PropTypes.number,
          max: PropTypes.number,
          step: PropTypes.number,
        })
      })
    }).isRequired,
    level: PropTypes.number,
    value: PropTypes.number,
    onChange: PropTypes.func.isRequired
  }

  focus() {
    this._inputElement.focus()
  }

  handleChange = event => {
    const inputValue = event.target.value
    const patch = inputValue === '' ? unset() : set(Number(inputValue))
    this.props.onChange(PatchEvent.from(patch))
  }

  render() {
    const { type, value, level } = this.props
    const title = `${type.title}: ${value}`
    const { min, max, step } = type.options.range
    return (
      <div>
        <FormField label={title} level={level} description={type.description}>
          <input
            // eslint-disable-next-line react/jsx-no-bind, no-return-assign
            ref={element => this._inputElement = element}
            type='range'
            className={styles.slider}
            min={min}
            max={max}
            step={step}
            value={value === undefined ? '' : value}
            onChange={this.handleChange}
          />
        </FormField>
      </div>
    )
  }
}

Slider.defaultProps = {
  level: 1,
  value: 0
}