FLIN App

Volume Control

Basic slider with live value display.

Volume

Brightness

Slider with step increments of 5.

Brightness

75%

Price Range

Large step slider for price filtering.

Max Price

$25

Opacity

Control visual transparency with a 0-100 range.

Opacity

80%

Image Quality

Compression quality for image exports.

Quality

50%

Usage

volume = 50// Basic slider<Slider label="Volume" bind={volume} min="0" max="100" />// With step<Slider label="Brightness" bind={brightness} min="0" max="100" step="5" />// Large range with step<Slider label="Max Price" bind={price} min="0" max="500" step="25" />

Props

Prop	Type	Default	Description
`label`	text	""	Label text above slider
`bind`	binding	-	Two-way binding for value
`min`	text	"0"	Minimum value
`max`	text	"100"	Maximum value
`step`	text	"1"	Step increment

Slider

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Volume Control

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Brightness

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Price Range

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Opacity

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Font Size

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Image Quality

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props

Volume Control

Brightness

Price Range

Opacity

Font Size

Image Quality

Usage

Props