Angle Slider

import * as React from 'react'
import { AngleSlider } from '@hamur/react/angle-slider'

const directions = [0, 45, 90, 135, 180, 225, 270, 315]

export default function AngleSliderControlledExample() {
  const [value, setValue] = React.useState(225)
  const [reason, setReason] = React.useState('none')
  return (
    <div className="stack">
      <AngleSlider.Root
        className="angle-slider"
        value={value}
        step={5}
        onValueChange={(next, details) => {
          setValue(next)
          setReason(details.reason)
        }}
      >
        <AngleSlider.Label>Wind direction</AngleSlider.Label>
        <AngleSlider.Control className="angle-slider-control">
          <AngleSlider.Indicator className="angle-slider-indicator" />
          {directions.map((direction) => (
            <AngleSlider.Marker key={direction} className="angle-slider-marker" value={direction} />
          ))}
          <AngleSlider.Value className="angle-slider-value" />
          <AngleSlider.Thumb className="slider-thumb angle-slider-thumb" />
        </AngleSlider.Control>
      </AngleSlider.Root>
      <p className="muted angle-slider-log">
        value {value} · reason {reason}
      </p>
      <button type="button" className="button" onClick={() => setValue(0)}>
        Point north
      </button>
    </div>
  )
}

import * as React from 'react'
import { AngleSlider } from '@hamur/react/angle-slider'
import { Field } from '@hamur/react/field'
import { Form } from '@hamur/react/form'

export default function AngleSliderFormExample() {
  const [submitted, setSubmitted] = React.useState('')
  return (
    <Form
      className="stack"
      onFormSubmit={(_values, details) => {
        const form = details.event.target as HTMLFormElement
        setSubmitted([...new FormData(form)].map(([key, value]) => `${key}=${value}`).join('&'))
      }}
    >
      <Field.Root name="heading" className="field angle-slider-field">
        <Field.Label>Heading</Field.Label>
        <AngleSlider.Root className="angle-slider" defaultValue={90} step={5}>
          <AngleSlider.Control className="angle-slider-control">
            <AngleSlider.Indicator className="angle-slider-indicator" />
            <AngleSlider.Value className="angle-slider-value" />
            <AngleSlider.Thumb className="slider-thumb angle-slider-thumb" />
          </AngleSlider.Control>
        </AngleSlider.Root>
        <Field.Description className="muted">
          Arrows turn it by 5°, Shift and Page Up or Down by 15°.
        </Field.Description>
      </Field.Root>
      <button className="button" type="submit">
        Send
      </button>
      {submitted ? <pre className="output">{submitted}</pre> : null}
    </Form>
  )
}