Slider

A material design slider (supports iOS style).

Usage

Slider: 30.0

<template>
  <Column :gap="20">
    <Column :gap="10">
      <Text>Slider: {{ sliderVal.toFixed(1) }}</Text>
      <Container :width="300">
        <Slider v-model:value="sliderVal" :min="0" :max="100" />
      </Container>
    </Column>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, Slider, Container } from "fluekit";

const sliderVal = ref(30);
</script>

RangeSlider

A material design range slider (supports iOS style).

Usage

RangeSlider: 20.0 - 80.0

<template>
  <Column :gap="20">
    <Column :gap="10">
      <Text>RangeSlider: {{ rangeVal.start.toFixed(1) }} - {{ rangeVal.end.toFixed(1) }}</Text>
      <Container :width="300">
        <RangeSlider v-model:value="rangeVal" :min="0" :max="100" />
      </Container>
    </Column>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, RangeSlider, Container } from "fluekit";

const rangeVal = ref({ start: 20, end: 80 });
</script>

Negative Values

Both Slider and RangeSlider support negative values.

Negative Range Slider (-50 to 50)

Value: 0.0Negative RangeSlider (-100 to -10)

Value: -80.0 - -30.0

<template>
  <Column :gap="20">
    <Text>Negative Range Slider (-50 to 50)</Text>
    <Container :width="300">
      <Slider v-model:value="value1" :min="-50" :max="50" />
    </Container>
    <Text>Value: {{ value1.toFixed(1) }}</Text>

    <Text>Negative RangeSlider (-100 to -10)</Text>
    <Container :width="300">
      <RangeSlider v-model:value="value2" :min="-100" :max="-10" />
    </Container>
    <Text>Value: {{ value2.start.toFixed(1) }} - {{ value2.end.toFixed(1) }}</Text>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Slider, RangeSlider, Column, Text, Container } from "fluekit";

const value1 = ref(0);
const value2 = ref({ start: -80, end: -30 });
</script>

API (Slider)

Props

Name	Type	Default	Description
value	number	-	The currently selected value for this slider.
min	number	0	The minimum value the user can select.
max	number	100	The maximum value the user can select.
variant	'material' | 'ios'	'ios'	The visual style of the slider.
activeColor	string	'#007AFF'	The color to use for the portion of the slider track that is active.
inactiveColor	string	'#E5E5EA'	The color for the inactive portion of the slider track.
thumbColor	string	'#FFFFFF'	The color to use for the thumb.

Events

Name	Description
update:value	Emitted when the value changes.
change	Emitted during a drag when the user is selecting a new value.

Props (RangeSlider)

Name	Type	Default	Description
value	{ start: number, end: number }	-	The currently selected range values.
min	number	0	The minimum value the user can select.
max	number	100	The maximum value the user can select.
variant	'material' | 'ios'	'ios'	The visual style of the slider.
activeColor	string	'#007AFF'	The color to use for the portion of the slider track that is active.
inactiveColor	string	'#E5E5EA'	The color for the inactive portion of the slider track.
thumbColor	string	'#FFFFFF'	The color to use for the thumb.

Events (RangeSlider)

Name	Description
update:value	Emitted when the range value changes.
change	Emitted during a drag when the user is selecting a new range.