Show case

Slider

Here are several examples of how to use the Slider component, categorized by its properties.

1. Range and Value

These properties define the bounds and the current position of the slider.

Preview

Code

import React from 'react';
import { Slider } from '@flexnative/slider';

export default class ValueExamples extends React.PureComponent {
  render() {
    return (
      <div className='example-block' style={{display: 'block'}}>
        {/* Basic 0 to 1 range (Default) */}
        <Slider value={0.5} />

        {/* Percentage range 0 to 100 */}
        <Slider 
          value={25} 
          minimumValue={0} 
          maximumValue={100} 
        />

        {/* Custom bounds with negative values */}
        <Slider 
          value={0} 
          minimumValue={-50} 
          maximumValue={50} 
        />
      </div>
    );
  }
}

2. Steps and Snapping

Control the granularity of the selection using fixed intervals or specific points.

Preview

Code

import React from 'react';
import { Slider } from '@flexnative/slider';

export default class StepExamples extends React.PureComponent {
  render() {
    return (
      <div className='example-block' style={{display: 'block'}}>
        {/* Integer steps of 1 */}
        <Slider value={3} step={1} minimumValue={0} maximumValue={10} />

        {/* Decimal steps of 0.1 */}
        <Slider step={0.3} minimumValue={0} maximumValue={1} />

        {/* Snap to specific values only */}
        <Slider 
          snapPoints={[0, 0.25, 0.5, 0.75, 1]} value={0.5} 
        />

        {/* Hide the visual step indicators/labels */}
        <Slider step={0.2} hideSteps={true} />
      </div>
    );
  }
}

3. Colors and Theming

Customize the visual appearance of the tracks and the thumb.

Preview

Code

import React from 'react';
import { Slider } from '@flexnative/slider';

export default class ColorExamples extends React.PureComponent {
  render() {
    return (
      <div className='example-block' style={{display: 'block'}}>
        {/* Custom track colors */}
        <Slider 
          minimumTrackTintColor="#FF5733" 
          maximumTrackTintColor="#D1D1D1" 
        />

        {/* Custom thumb color */}
        <Slider thumbTintColor="royalblue" />

        {/* Full color customization */}
        <Slider 
          minimumTrackTintColor="green" 
          maximumTrackTintColor="lightgray" 
          thumbTintColor="darkgreen" 
        />
      </div>
    );
  }
}

4. Tooltip Customization

Adjust the tooltip that appears while sliding.

Preview

Code

import React from 'react';
import { Slider } from '@flexnative/slider';

export default class TooltipExamples extends React.PureComponent {
  render() {
    return (
      <div className='example-block' style={{display: 'block'}}>
        {/* Custom tooltip colors */}
        <Slider 
          tooltipBackgroundColor="black" 
          tooltipBorderColor="white" 
        />

        {/* Thick border on tooltip */}
        <Slider 
          tooltipBackgroundColor="#333" 
          tooltipBorderColor="cyan" 
          tooltipBorderWidth={2} 
        />
      </div>
    );
  }
}

5. Custom Styling

Fine-tune the dimensions and shapes of the slider parts.

To use custom SVG icons for the Slider thumb, you primarily use the thumbImage and thumbTintColor properties.

Preview

Code

import React from 'react';
import { StyleSheet } from 'react-native';
import { Slider } from '@flexnative/slider';
import { LOGO } from '@site/src/constants/common';

export default class StyleExamples extends React.PureComponent {
  render() {
    return (
      <div className='example-block' style={{display: 'block'}}>
        {/* Thick track with rounded corners */}
        <Slider 
          trackStyle={styles.thickTrack} 
        />

        {/* Large custom thumb */}
        <Slider 
          thumbStyle={styles.largeThumb} 
        />

        {/* Using a custom image as the thumb */}
        <Slider 
          thumbImage={LOGO} 
          thumbTintColor="gold"
        />
      </div>
    );
  }
}

const styles = StyleSheet.create({
  thickTrack: {
    height: 10,
    borderRadius: 5,
  },
  largeThumb: {
    width: 30,
    height: 30,
    borderRadius: 15,
  }
});

6. State and Interaction

Handle interaction behavior, animations, and disabled states.

Preview

Code

import React from 'react';
import { Slider } from '@flexnative/slider';

export default class InteractionExamples extends React.PureComponent {
  render() {
    return (
      <div className='example-block' style={{display: 'block'}}>
        {/* Disabled slider */}
        <Slider disabled={true} value={0.5} />

        {/* Spring animation when value changes programmatically */}
        <Slider 
          animateTransitions={true} 
          animationType="spring" 
          value={0.8} 
        />

        {/* Event callbacks */}
        <Slider 
          onValueChange={(val) => console.log("Changing:", val)}
          onSlidingComplete={(val) => console.log("Finished at:", val)}
        />
      </div>
    );
  }
}

7. Volume Control

Custom styling with volume icon and haptic feedback simulation

Preview

🔊

Volume: 75%

🎤

Low

Medium

High

Max

Code

import React, { useCallback, useState } from 'react';
import {
  Alert,
  StyleSheet,
  Text,
  View,
} from "react-native";

import { Slider } from '@flexnative/slider';

export default () => {

  const [volumeValue, setVolumeValue] = useState(75);
  const [isSliding, setIsSliding] = useState(false);
  
  const getVolumeIcon = (volume: number): string => {
    if (volume === 0) return "🔇";
    if (volume < 30) return "🔈";
    if (volume < 70) return "🔉";
    return "🔊";
  };

  const handleVolumeChange = useCallback((value: number) => {
    setVolumeValue(Math.round(value));
  }, []);

  const handleVolumeSlidingStart = useCallback((value: number) => {
    console.log("Volume sliding started at:", value);
    setIsSliding(true);
  }, []);

  const handleVolumeSlidingComplete = useCallback((value: number) => {
    console.log("Volume sliding completed at:", value);
    setIsSliding(false);
    Alert.alert("Volume Changed", `New volume level: ${Math.round(value)}%`);
  }, []);

  return (
    <div className='example-block' style={{display: 'block'}}>
      <View>
        <View style={styles.sliderContainer}>
          <View style={styles.volumeHeader}>
            <Text style={styles.volumeIcon}>{getVolumeIcon(volumeValue)}</Text>
            <Text style={[styles.value, isSliding && styles.slidingValue]}>
              Volume: {volumeValue}%
            </Text>
            <Text style={styles.slidingIndicator}>🎤</Text>
          </View>

          <Slider
            value={volumeValue}
            onValueChange={(val) => handleVolumeChange(val as number)}
            onSlidingStart={(val) => handleVolumeSlidingStart(val as number)}
            onSlidingComplete={(val) =>
              handleVolumeSlidingComplete(val as number)
            }
            minimumValue={0}
            maximumValue={100}
            minimumTrackTintColor="#FF2056"
            maximumTrackTintColor="#D6D3D1"
            thumbTintColor="#F5F5F4"
            style={styles.slider}
            trackStyle={styles.volumeTrack}
            thumbStyle={styles.volumeThumb}
          />

          <View style={styles.volumeLevels}>
            <Text style={styles.levelText}>Low</Text>
            <Text style={styles.levelText}>Medium</Text>
            <Text style={styles.levelText}>High</Text>
            <Text style={styles.levelText}>Max</Text>
          </View>
        </View>
      </View>
    </div>
  );
}

// Styles
const styles = StyleSheet.create({
  sliderContainer: {
    marginVertical: 10,
  },
  slider: {
    marginVertical: 10,
  },
  value: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#4A90E2",
    textAlign: "center",
  },
  volumeHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  volumeIcon: {
    fontSize: 28,
  },
  slidingValue: {
    color: "#FF6B6B",
    transform: [{ scale: 1.1 }],
  },
  slidingIndicator: {
    fontSize: 28,
  },
  volumeTrack: {
    height: 8,
  },
  volumeThumb: {
    // shadowColor: "#FF6B6B",
    // shadowOffset: { width: 0, height: 2 },
    // shadowOpacity: 0.3,
    // shadowRadius: 4,
    // elevation: 5,
  },
  volumeLevels: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 10,
  },
  levelText: {
    fontSize: 12,
    color: "#999",
  }
});

8. Temperature Control

Custom thumb image with color-coded track

Preview

🌡️

22°C

❄️ Cold

😊 Comfort

🔥 Hot

Code

import React, { useCallback, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from "react-native";

import { Slider } from '@flexnative/slider';

export default () => {
  const [temperatureValue, setTemperatureValue] = useState(22);

  const getTemperatureColor = (temp: number): string => {
    if (temp < 18) return "#4A90E2"; // Cold - Blue
    if (temp < 24) return "#50E3C2"; // Comfortable - Teal
    if (temp < 28) return "#F5A623"; // Warm - Orange
    return "#FF6B6B"; // Hot - Red
  };

  const handleTemperatureChange = useCallback((value: number) => {
    setTemperatureValue(Number(value.toFixed(1)));
  }, []);

  return (
    <div className='example-block' style={{display: 'block'}}>
      <View style={styles.sliderContainer}>
          <View style={styles.temperatureHeader}>
            <Text style={styles.temperatureIcon}>🌡️</Text>
            <Text
              style={[
                styles.temperatureValue,
                { color: getTemperatureColor(temperatureValue) },
              ]}
            >
              {temperatureValue}°C
            </Text>
          </View>

          <Slider
            value={temperatureValue}
            onValueChange={(val) => handleTemperatureChange(val as number)}
            minimumValue={0}
            maximumValue={40}
            hideSteps
            minimumTrackTintColor={getTemperatureColor(temperatureValue)}
            maximumTrackTintColor="#D6D3D1"
            thumbTintColor="#F5F5F4"
            style={styles.slider}
            animateTransitions={true}
            animationType="timing"
            animationConfig={{ duration: 200 }}
          />

          <View style={styles.temperatureLabels}>
            <Text style={styles.tempLabel}>❄️ Cold</Text>
            <Text style={styles.tempLabel}>😊 Comfort</Text>
            <Text style={styles.tempLabel}>🔥 Hot</Text>
          </View>
        </View>
    </div>
  );
}

// Styles
const styles = StyleSheet.create({
  sliderContainer: {
    marginVertical: 10,
  },
  slider: {
    marginVertical: 10,
  },
  temperatureHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  temperatureIcon: {
    fontSize: 28,
  },
  temperatureValue: {
    fontSize: 24,
    fontWeight: "bold",
  },
  temperatureLabels: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 10,
  },
  tempLabel: {
    fontSize: 18,
    color: "#999",
  },
});

9. Brightness Control

Using larger step values (10) for quick adjustments

Preview

🌓

Brightness: 30%

0

20

40

60

80

100

Code

import React, { useCallback, useState } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

import { Slider } from '@flexnative/slider';

export default () => {

  const [brightnessValue, setBrightnessValue] = useState(30);
  
  const getBrightnessIcon = (brightness: number): string => {
    if (brightness === 0) return "🌑";
    if (brightness < 30) return "🌒";
    if (brightness < 70) return "🌓";
    return "☀️";
  };

  const handleBrightnessChange = useCallback((value: number) => {
    setBrightnessValue(Math.round(value));
  }, []);

  return (
    <div className='example-block' style={{display: 'block'}}>
      <View style={styles.sliderContainer}>
        <View style={styles.brightnessHeader}>
          <Text style={styles.brightnessIcon}>
            {getBrightnessIcon(brightnessValue)}
          </Text>
          <Text style={styles.brightnessValue}>
            Brightness: {brightnessValue}%
          </Text>
        </View>

        <Slider
          value={brightnessValue}
          onValueChange={(val) => handleBrightnessChange(val as number)}
          minimumValue={0}
          maximumValue={100}
          minimumTrackTintColor="#F5A623"
          maximumTrackTintColor="#E0E0E0"
          thumbTintColor="#F5A623"
          style={styles.slider}
          trackStyle={{ height: 8 }}
          thumbStyle={styles.brightnessThumb}
        />

        <View style={styles.brightnessLevels}>
          {[0, 20, 40, 60, 80, 100].map((level) => (
            <TouchableOpacity
              key={level}
              style={[
                styles.levelDot,
                brightnessValue >= level && styles.activeLevelDot,
              ]}
              onPress={() => setBrightnessValue(level)}
            >
              <Text style={styles.levelDotText}>{level}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    </div>
  );
}

// Styles
const styles = StyleSheet.create({
  sliderContainer: {
    marginVertical: 10,
  },
  slider: {
    marginVertical: 10,
  },
  brightnessHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  brightnessIcon: {
    fontSize: 32,
  },
  brightnessValue: {
    fontSize: 16,
    fontWeight: "600",
    color: "#F5A623",
  },
  brightnessThumb: {
    backgroundColor: "#F5A623",
  },
  brightnessLevels: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 15,
  },
  levelDot: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: "#E0E0E0",
    justifyContent: "center",
    alignItems: "center",
  },
  activeLevelDot: {
    backgroundColor: "#F5A623",
  },
  levelDotText: {
    fontSize: 12,
    color: "#FFFFFF",
    fontWeight: "bold",
  }
});

10. Snap to Points

Slider that snaps to specific predefined values [0, 10, 25, 50, 75, 90, 100]

Preview

Snapped Value: 25

Code

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Slider } from '@flexnative/slider';

export default () => {
  const [snapValue, setSnapValue] = useState(25);

  return (
  <div className='example-block' style={{display: 'block'}}>
    <View style={styles.sliderContainer}>
      <Text style={styles.label}>Snapped Value: {snapValue}</Text>
      <Slider
        value={snapValue}
        onValueChange={(val) => setSnapValue(val as number)}
        minimumValue={0}
        maximumValue={100}
        snapPoints={[0, 10, 25, 50, 75, 90, 100]}
        minimumTrackTintColor="#2ECC71"
      />
      </View>
  </div>
  );
};



const styles = StyleSheet.create({
  sliderContainer: {
    marginVertical: 10,
  },
  label: {
    fontSize: 18,
    fontWeight: "600",
    color: "#333",
    marginBottom: 10,
  },
});

RangeSlider

Here are several examples of how to use the RangeSlider component, grouped by its properties. These examples demonstrate how to control the dual thumbs, intervals, and visual styling.

1. Range, Value, and Distance

The RangeSlider uses an array of two numbers for its value. The minimumDistance property ensures a specific gap is maintained between the two thumbs.

Preview

Code

import React from 'react';
import { RangeSlider } from '@flexnative/slider';

export default () => (
  <div className='example-block' style={{display: 'block'}}>
    {/* Default 0 to 1 range with specific starting points */}
    <RangeSlider value={[0.2, 0.8]} />

    {/* Custom bounds (0-100) */}
    <RangeSlider 
      minimumValue={0} 
      maximumValue={100} 
      value={[20, 50]} 
    />

    {/* Enforce a minimum distance of 20 units between thumbs */}
    <RangeSlider 
      minimumValue={0} 
      maximumValue={100} 
      minimumDistance={20} 
      value={[30, 40]} // Will snap to maintain the 20 unit gap
    />
  </div>
);

2. Steps and Snapping

Control the granularity of the selection. Visual step indicators can be shown or hidden.

Preview

Code

import React from 'react';
import { RangeSlider } from '@flexnative/slider';

export default () => (
  <div className='example-block' style={{display: 'block'}}>
    {/* Discrete steps of 10 */}
    <RangeSlider 
      minimumValue={0} 
      maximumValue={50} 
      step={10} 
    />

    {/* Snap to specific values only */}
    <RangeSlider 
      snapPoints={[0, 0.25, 0.5, 0.75, 1]} 
      value={[0.25, 0.75]} 
    />

    {/* Steps logic enabled but visual indicators hidden */}
    <RangeSlider 
      step={0.1} 
      hideSteps={true} 
    />
  </div>
);

3. Colors and Tooltips

The minimumTrackTintColor in a RangeSlider typically colors the segment between the two thumbs, while maximumTrackTintColor colors the outer segments.

Preview

Code

import React from 'react';
import { RangeSlider } from '@flexnative/slider';

export default () => (
  <div className='example-block' style={{display: 'block'}}>
    {/* Custom track and thumb colors */}
    <RangeSlider 
      minimumTrackTintColor="#4A90E2" 
      maximumTrackTintColor="#50E3C2"
      thumbTintColor="#F5A623" 
    />

    {/* Custom tooltip appearance */}
    <RangeSlider 
      tooltipBackgroundColor="#FF6B6B" 
      tooltipBorderColor="red" 
      tooltipBorderWidth={1}
    />
  </div>
);

4. Custom Thumbs and Styling

You can use icons or custom styles to change the appearance of the dual thumbs.

Preview

Code

import React from 'react';
import { RangeSlider } from '@flexnative/slider';
import { LOGO } from '@site/src/constants/common';

export default () => (
  <div className='example-block' style={{display: 'block'}}>
     {/* Using an icon for both thumbs */}
    <RangeSlider 
      humbImage={LOGO} 
      thumbTintColor="black"
    />

    {/* Custom sizing for the thumbs and track */}
    <RangeSlider 
      thumbStyle={{ width: 32, height: 32, borderRadius: 8 }}
      trackStyle={{ height: 8 }}
    />
  </div>
);

5. State and Interaction

Handle disabled states and transition animations when values change programmatically.

Preview

Code

import React from 'react';
import { RangeSlider } from '@flexnative/slider';

export default () => (
  <div className='example-block' style={{display: 'block'}}>
    {/* Interaction disabled */}
    <RangeSlider 
      disabled={true} 
      value={[0.3, 0.6]} 
    />

    {/* Smooth transitions when values are updated via code */}
    <RangeSlider 
      animateTransitions={true} 
      animationType="spring" 
      value={[0.1, 0.9]} 
    />

    {/* Callback handling */}
    <RangeSlider 
      onValueChange={(values) => console.log("Low:", values[0], "High:", values[1])}
    />
  </div>
);

6. Range Selector

Dual-handle slider for selecting a range of values.

Preview

Selected Range: 20 - 80

Code

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RangeSlider } from '@flexnative/slider';

export default () => {
  const [rangeValue, setRangeValue] = useState([20, 80]);

  const handleRangeChange = (value: number[]) => {
    setRangeValue(value);
  };

  return (
  <div className='example-block' style={{display: 'block'}}>
    <View style={styles.sliderContainer}>
      <Text style={styles.label}>
        Selected Range: {rangeValue[0]} - {rangeValue[1]}
      </Text>
      <RangeSlider
        value={rangeValue}
        onValueChange={handleRangeChange}
        minimumValue={0}
        maximumValue={100}
        step={20}
        minimumTrackTintColor="#4A90E2"
        maximumTrackTintColor="#D6D3D1"
        thumbTintColor="#F5F5F4"
      />
    </View>
  </div>
  );
};



const styles = StyleSheet.create({
  sliderContainer: {
    marginVertical: 10,
  },
  label: {
    fontSize: 18,
    fontWeight: "600",
    color: "#333",
    marginBottom: 10,
  },
});