Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: input dinamic range slider #88

Merged
merged 10 commits into from
Mar 2, 2024
Merged

Conversation

RafaelLimaC
Copy link
Contributor

@RafaelLimaC RafaelLimaC commented Feb 28, 2024

Closes #26

Feature

Criação do componente de range dinâmico. Com animação de movimento ao arrastar o botão.

Changelog Funcionalidade do componente: quando o usuário clica no botão e arrasta o componente calcula a direção do mouse ou touch para dispositivos móveis e move o background na direção respectiva para dar a impressão de movimento para o usuário.
Visual evidences 🖼️

image

Additional info TODO: remover sigla kg em small devices, usar um span no lugar do h1, separar kg em outro span e esconder no mobile, passar kg ou lb na construção do componente

@RafaelLimaC RafaelLimaC marked this pull request as ready for review February 29, 2024 16:40
Copy link
Contributor

@diogocaronte diogocaronte left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Estamos lidando com um componente de slider mas ele está muito engessado.

Não consigo mudar o mínimo.
Não consigo mudar o máximo.
Não consigo mudar a unidade.

O componente está sugerindo um slider genérico mas ele está sendo especifico para peso. Não tenho nem a opção de remover o titulo.

src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
src/components/RangeSlider/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@hxsggsz hxsggsz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sem nenhuma observação a mais além as do djogo

@diogocaronte diogocaronte merged commit 8a16de8 into devhatt:main Mar 2, 2024
JonasGz pushed a commit to JonasGz/pet-dex-frontend-p4n4 that referenced this pull request Mar 4, 2024
* feat: input dinamic range slider

fix devhatt#26

* fix: reverting changes on nopetregisredpage, this page should not be modified

fix devhatt#26

* refactor: add breakpoint and scss vars in style file

fix devhatt#26

* refactor: change html to span for semantic reasons and added a unit variable on component build

fix devhatt#26

* style: hide unit span on mobile devices

fix devhatt#26

* refactor: add getters and setters for RangeSlider values. change component storybook to follow pattern

fix devhatt#26

* refactor: change variable name for better reading and understanding

fix devhatt#26

* refactor: add options to storybook and unmount to remove event listeners

fix devhatt#26

* refactor: sepated handlemove into handlemouse and handletouch move

fix devhatt#26

* feat: add listener do key 'esc', when pressed the value resets

fix devhatt#26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implementação de Componente Input Range Dinâmico
4 participants