GradientSlider component · Kition Tessera

Playground

Temperature

Props

label

min

max

decimals

disabled

What is shown

import { GradientSlider } from '@kition/tessera-ui'
import { useState } from 'react'

const [value, setValue] = useState(10)

<GradientSlider
  label="Temperature"
  min={-100}
  max={100}
  stops={SLIDER_GRADIENTS.temperature}
  value={value}
  onChange={setValue}
/>

Keyboard

Keys	What they do
`Arrows`	Change the value by a hundredth of the soft range (Right and Up raise it); with Shift, by ten of those.
`Home, End`	Go to the low or the high end of the soft range.

Examples

White balance

Temperature

Tint

-5

gradient-slider.tsx

import { useState } from 'react'
import { GradientSlider, SLIDER_GRADIENTS } from '@kition/tessera-ui'

export default function Demo() {
  const [temperature, setTemperature] = useState(10)
  const [tint, setTint] = useState(-5)
  return (
    <div className="demo-stack" style={{ width: 300 }}>
      <GradientSlider label="Temperature" value={temperature} min={-100} max={100} stops={SLIDER_GRADIENTS.temperature} onChange={(value) => setTemperature(value)} />
      <GradientSlider label="Tint" value={tint} min={-100} max={100} stops={SLIDER_GRADIENTS.tint} onChange={(value) => setTint(value)} />
    </div>
  )
}

Props

GradientSlider

Prop	Type	Default	Description
`value`required	`number`	—
`min`required	`number`	—
`max`required	`number`	—
`softMin`	`number`	`min`	The track's range (upstream's `soft_min`/`soft_max`); `min` and `max` by default. The hot text reaches `min`..`max`.
`softMax`	`number`	`max`
`decimals`	`number`	`0`	Decimals a value is rounded to (0 by default).
`default`	`number`	—	Restored by a double-click on the track; no double-click without it.
`stops`	`readonly string[]`	—	CSS gradient stops for the track (Temperature, Tint, Hue; see `SLIDER_GRADIENTS`); a plain track when absent.
`label`required	`string`	—
`onChange`required	`(value: number, phase: DragPhase) => void`	—
`disabled`	`boolean`	—
`uiId`	`string`	—
`testId`	`string`	—