Slider

let reader = Specimen_Reader.reader

@react.component
let make = () => {
  <>
    <KitReact.Roles.FormGroup
      id="react-slider-opacity" printedValue={React.string("60%")}
      label={React.string("Opacity")}
      help={React.string("From 0 to 100%.")}
      kind={KitReact.Roles.Slider.controlSet({
        reader,
        min: 0.,
        max: 100.,
        step: 10.,
        measure: Unit(#percent),
        thumbs: One({label: "Opacity", name: "opacity", value: "60"}),
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-slider-price" printedValue={React.string("£50.00 – £250.00")}
      label={React.string("Price")}
      help={React.string("From £0 to £500.")}
      kind={KitReact.Roles.Slider.controlSet({
        reader,
        min: 0.,
        max: 500.,
        step: 10.,
        measure: Currency("GBP"),
        thumbs: Two(
          {label: "Lowest price", name: "price[lowest]", value: "50"},
          {label: "Highest price", name: "price[highest]", value: "250"},
        ),
      })}
    />
  <KitReact.Roles.FormGroup
    id="react-slider-opacity-disabled" printedValue={React.string("60%")}
    label={React.string("Opacity")}
    help={React.string("Only the owner can change this. From 0 to 100%.")}
    kind={KitReact.Roles.Slider.controlSet({
      reader, min: 0., max: 100., step: 10., measure: Unit(#percent), disabled: true,
      thumbs: One({label: "Opacity", name: "opacity", value: "60"}),
    })}
  />
  <KitReact.Roles.FormGroup
    id="react-slider-price-disabled" printedValue={React.string("£50.00 – £250.00")}
    label={React.string("Price")}
    help={React.string("Only the owner can change this. From £0 to £500.")}
    kind={KitReact.Roles.Slider.controlSet({
      reader, min: 0., max: 500., step: 10., measure: Currency("GBP"), disabled: true,
      thumbs: Two({label: "Lowest price", name: "price[lowest]", value: "50"}, {label: "Highest price", name: "price[highest]", value: "250"}),
    })}
  />
  </>
}