Componente Slider no React Native: 3 Exemplos Práticos

🎯 O que é o Slider no React Native?

O Slider é um componente gráfico que permite ao usuário selecionar um valor arrastando um botão deslizante horizontalmente. É muito útil quando queremos representar uma faixa de valores, como volume, brilho, opacidade ou qualquer outro parâmetro ajustável.

No React Native, usamos a biblioteca @react-native-community/slider para integrar esse componente com facilidade em nossos aplicativos.

🧪 Exemplo 1 – Slider Simples

Este exemplo é o mais básico. Um slider que varia de 0 a 100 e exibe o valor na tela em tempo real:

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

export default function App() {
  const [valor, setValor] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Valor: {valor}</Text>
      <Slider
        minimumValue={0}
        maximumValue={100}
        step={1}
        value={valor}
        onValueChange={setValor}
        minimumTrackTintColor="#1E90FF"
        thumbTintColor="#1E90FF"
        style={{ width: 300 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24 },
});

Explicação: Esse exemplo ajuda o aluno a entender a base do componente Slider, com valores discretos e leitura em tempo real.

🎨 Exemplo 2 – Slider Controlando a Opacidade de uma Imagem

Agora, usamos o slider para controlar a opacidade de uma imagem. Isso mostra como o slider pode ser aplicado a propriedades visuais:

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

export default function App() {
  const [opacidade, setOpacidade] = useState(1);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Controle de Opacidade</Text>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={[styles.image, { opacity: opacidade }]}
      />
      <Slider
        minimumValue={0}
        maximumValue={1}
        value={opacidade}
        onValueChange={setOpacidade}
        minimumTrackTintColor="#32CD32"
        thumbTintColor="#32CD32"
        style={{ width: 300 }}
      />
      <Text>Opacidade: {(opacidade * 100).toFixed(0)}%</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  image: { width: 150, height: 150, marginBottom: 20 },
  title: { fontSize: 22, marginBottom: 20 },
});

Explicação: A propriedade opacity vai de 0 (invisível) a 1 (totalmente visível). Aqui usamos o slider para modificar isso em tempo real.

🌈 Exemplo 3 – Slider RGB: Criando Cores com Três Sliders

Neste exemplo, usamos três sliders para controlar as cores vermelho, verde e azul (RGB), gerando uma cor de fundo dinâmica.

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

export default function App() {
  const [r, setR] = useState(255);
  const [g, setG] = useState(255);
  const [b, setB] = useState(255);
  const cor = `rgb(${r}, ${g}, ${b})`;

  return (
    <View style={[styles.container, { backgroundColor: cor }]}>
      <Text style={styles.title}>Cor RGB: {cor}</Text>

      <Text>Vermelho: {r}</Text>
      <Slider minimumValue={0} maximumValue={255} value={r} onValueChange={setR} step={1}
              minimumTrackTintColor="red" thumbTintColor="red" />

      <Text>Verde: {g}</Text>
      <Slider minimumValue={0} maximumValue={255} value={g} onValueChange={setG} step={1}
              minimumTrackTintColor="green" thumbTintColor="green" />

      <Text>Azul: {b}</Text>
      <Slider minimumValue={0} maximumValue={255} value={b} onValueChange={setB} step={1}
              minimumTrackTintColor="blue" thumbTintColor="blue" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center' },
  title: { fontSize: 20, marginBottom: 20, fontWeight: 'bold' },
});

Explicação: Esse exemplo mostra como combinar sliders para controlar múltiplas variáveis. Aqui os alunos veem como criar cores de forma interativa com base em valores RGB.

🚀 Conclusão

O componente Slider é extremamente útil no desenvolvimento de interfaces interativas. Ele pode ser usado em situações simples, como selecionar um valor numérico, ou de forma mais criativa, como ajustar a opacidade ou controlar cores.

Esses três exemplos foram criados para te mostrar o potencial desse componente no React Native. Experimente, modifique os códigos e teste suas ideias!

—

Professor Washington Paiva – Desenvolvimento de Sistemas