Number & Slider

Number input with steppers, prefix/suffix and a slider with single/range values, scale and formatted tooltip.

NumberInput & Slider

NumberInput & Slider

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6">
    <ThlField label="Quantity (1–10)"><ThlNumberInput v-model="qty" :min="1" :max="10" /></ThlField>
    <ThlField label="Price"><ThlNumberInput v-model="price" :step="0.5" prefix="$" suffix="USD" /></ThlField>
  </div>
  <div class="thl-col-12 thl-col-md-6">
    <ThlField :label="`Single: ${a}`"><ThlSlider v-model="a" aria-label="single" /></ThlField>
    <ThlField :label="`Range: ${range.join(' – ')}`"><ThlSlider v-model="range" :min="0" :max="1000" :step="10" color="success" show-scale :format="(x) => '$' + x" aria-label="range" /></ThlField>
  </div>
</div>

React

<NumberInput value={qty} onChange={setQty} min={1} max={10} />
<NumberInput value={price} onChange={setPrice} step={0.5} prefix="$" suffix="USD" />
<Slider value={a} onChange={setA} />
<Slider value={range} onChange={setRange} min={0} max={1000} step={10} showScale format={(x) => `$${x}`} />

Angular

<thl-number-input [(value)]="qty" [min]="1" [max]="10" />
<thl-slider [(value)]="a" />
<thl-slider [(value)]="range" [min]="0" [max]="1000" [step]="10" showScale />

API

NumberInput

<ThlNumberInput> · import { ThlNumberInput } from '@thl-ui/vue'

Prop	Type	Default
modelValue	any	—
min	number	—
max	number	—
step	number	1
prefix	string	—
suffix	string	—
disabled	boolean	—
id	string	—
size	string	—

Events: update:modelValue

Slider

<ThlSlider> · import { ThlSlider } from '@thl-ui/vue'

Prop	Type	Default
modelValue*	number | array	—
min	number	0
max	number	100
step	number	1
color	string	—
disabled	boolean	—
showTip	boolean	true
showScale	boolean	—
format	function	—
ariaLabel	string	—

Events: update:modelValue