Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

6 months ago

Construir controle deslizante de intervalo com marcadores personalizados no React

Um controle deslizante de intervalo é um elemento da interface gráfica do usuário que permite aos usuários selecionar um intervalo de valores de um conjunto contínuo ou discreto. Normalmente consiste em uma trilha ao longo da qual uma ou mais alças de polegar podem ser movidas para especificar o intervalo desejado.

Neste tutorial, aprenderemos como criar um componente de controle deslizante de intervalo com marcadores personalizados em um aplicativo React usando o pacote rc-slider .

  • Etapa 1: Criar aplicativo React
  • Etapa 2: instalar o pacote RC Slider
  • Etapa 3: Criar novo componente
  • Etapa 4: construir controle deslizante de intervalo com marcas personalizadas
  • Etapa 5: atualizar a entrada principal
  • Etapa 6: visualizar o aplicativo no navegador

Etapa 1: Criar aplicativo React

Instalaremos uma nova estrutura de aplicativo React; você pode usar o comando abaixo para criar um novo projeto.

npx create-react-app my-react-app

Agora, o aplicativo está instalado. Você tem que entrar na pasta do aplicativo.

cd my-react-app

Etapa 2: instalar o pacote RC Slider

Agora, você deve instalar o módulo deslizante RC. Para construir o layout simples de nossa demonstração, estamos usando Bootstrap.

Você pode instalar ambas as bibliotecas usando o comando fornecido.

npm i rc-slider bootstrap --legacy-peer-deps

Etapa 3: Criar novo componente

Você deve criar uma nova pasta components/ no diretório src/; crie também um arquivo RcSlider.js.

Importe os serviços Slider e Range do pacote ‘rc-slider’; para adicionar o estilo personalizado do rc-slider, adicione também o caminho ‘rc-slider/assets/index.css’;

import React from 'react'
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';
function RcSlider() {
  return (
    <div></div>
  )
}
export default RcSlider

Etapa 4: construir controle deslizante de intervalo com marcas personalizadas

Nesta etapa, mostraremos como criar um controle deslizante de intervalo com marcas personalizadas em um componente de função.

import React from "react";
import "rc-slider/assets/index.css";
import Slider from "rc-slider";
const style = { width: 400, margin: 50 };
const marks = {
  "-10": "-10°C",
  0: <strong>0°C</strong>,
  26: "26°C",
  37: "37°C",
  50: "50°C",
  100: {
    style: {
      color: "red",
    },
    label: <strong>100°C</strong>,
  },
};
function log(value) {
  console.log(value); //eslint-disable-line
}
function RcSlider() {
  return (
    <div>
      <div style={style}>
        <p>Range Slider with marks, `step=null`, pushable, draggableTrack</p>
        <Slider
          range
          min={-10}
          marks={marks}
          step={null}
          onChange={log}
          defaultValue={[-10, 0]}
          allowCross={false}
          pushable
        />
      </div>
    </div>
  );
}
export default RcSlider;

Etapa 5: atualizar a entrada principal

A seguir, registraremos o componente RcSlider no arquivo principal App.js. Certifique-se de importar e adicionar o nome do componente no arquivo conforme sugerido abaixo.

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import RcSlider from "./components/RcSlider";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Custom Range Slider Example</h2>
      <RcSlider />
    </div>
  );
}
export default App;

Etapa 6: visualizar o aplicativo no navegador

Eventualmente chegaremos à etapa final deste guia. Nesta etapa, usaremos um único comando para executar o aplicativo no navegador.

npm start

Depois de executar o comando acima, seu aplicativo será veiculado no navegador com o URL fornecido:

http://localhost:3000

Conclusão

Neste tutorial, aprendemos como construir facilmente um componente deslizante de intervalo em React.js usando o componente deslizante RC.

1.60 GEEK