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.

Sign up for GitHub

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

Jump to bottom

Implementação de Componente Input Range Dinâmico #26

Closed
Tracked by #97
Alecell opened this issue Dec 15, 2023 · 6 comments · Fixed by #88
Closed
Tracked by #97

Implementação de Componente Input Range Dinâmico #26

Alecell opened this issue Dec 15, 2023 · 6 comments · Fixed by #88
Assignees
@RafaelLimaC

Comments

@Alecell
Copy link
Contributor

Alecell commented Dec 15, 2023 •
edited

Describe the feature
Desenvolvimento de um componente de input range para ajuste de valores, como o peso no PetDex.

Description Implementar um componente interativo de input range que permita ao usuário ajustar valores movendo a régua com o dedo ou o mouse. Este componente deve apresentar uma animação suave e permitir a configuração de valores mínimos e máximos, além de expor eventos para mudanças em tempo real e ao finalizar a interação.

Use Case Este componente permitirá aos usuários do PetDex ajustar com precisão valores como o peso do pet, oferecendo uma interface intuitiva e amigável para uma experiência de usuário aprimorada.

Implementation Details O componente deve ser responsivo e acessível, com suporte para interação tanto em dispositivos móveis quanto desktops. Deve-se considerar a possibilidade de sobrescrita de estilos via SCSS para facilitar a personalização conforme necessário.

Visual Concepts O conceito visual atual pode ser consultado no Figma: [Layout PetDex](https://www.figma.com/file/ZQ5mPH1j2snuiVpkp68EI5/PetDex).

image

image


Additional Information Deve-se garantir que o componente siga as melhores práticas de usabilidade e acessibilidade, como diretrizes de ARIA para inputs do tipo range.

Perguntas Pendentes

  • Quais são as especificações para a animação de mudança do range?
  • Existem diretrizes de estilo específicas para o estado "erro" do componente?
  • Como o valor do range será integrado com o estado global do aplicativo ou gerenciamento de estado local?
@Alecell Alecell changed the title Régua de peso Implementação do componente slider responsivo para ajuste de peso Dec 16, 2023
@Alecell Alecell changed the title Implementação do componente slider responsivo para ajuste de peso Implementação de Componente Input Range Dinâmico Dec 17, 2023
@Alecell
Copy link
Contributor Author

Alecell commented Dec 19, 2023

Ponto: 34

@anthonymanoel
Copy link

Mim dê papai, eu quero.

@anthonymanoel
Copy link

Eu quero!!!

@anthonymanoel
Copy link

Coe, terminando só falta a weight box manual e consertar o responsivo.

@anthonymanoel
Copy link

image

é para fazer isso aqui?

anthonymanoel added a commit to anthonymanoel/pet-dex-frontend that referenced this issue Jan 11, 2024
@anthonymanoel
feat: adding a new component that will put weight in slider-range
8397944 
fix issue-26 devhatt#26
@anthonymanoel anthonymanoel mentioned this issue Jan 11, 2024
Closed
anthonymanoel added a commit to anthonymanoel/pet-dex-frontend that referenced this issue Jan 11, 2024
@anthonymanoel
style: Removendo arquivos CSS, alterando tags chamadas no documento S…
19f29f2 
…CSS e ajeitando bug do prettier

fix devhatt#26
@RafaelLimaC
Copy link
Contributor

Eu quero!!!

RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 28, 2024
@RafaelLimaC
feat: input dinamic range slider
e93f8d4 
fix devhatt#26
@RafaelLimaC RafaelLimaC mentioned this issue Feb 28, 2024
Merged
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 28, 2024
@RafaelLimaC
fix: reverting changes on nopetregisredpage, this page should not be …
8a0f24a 
…modified

fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 29, 2024
@RafaelLimaC
refactor: add breakpoint and scss vars in style file
c25ae3a 
fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 29, 2024
@RafaelLimaC
refactor: change html to span for semantic reasons and added a unit v…
85016a1 
…ariable on component build

fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Feb 29, 2024
@RafaelLimaC
style: hide unit span on mobile devices
faa1d3f 
fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Mar 1, 2024
@RafaelLimaC
refactor: add getters and setters for RangeSlider values. change comp…
444f6fa 
…onent storybook to follow pattern

fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Mar 1, 2024
@RafaelLimaC
refactor: change variable name for better reading and understanding
fbaf970 
fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Mar 1, 2024
@RafaelLimaC
refactor: display options for unit on storybook and emit events on va…
941f7e5 
…lue and unit change

fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Mar 1, 2024
@RafaelLimaC
refactor: add options to storybook and unmount to remove event listeners
3070763 
fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Mar 1, 2024
@RafaelLimaC
refactor: sepated handlemove into handlemouse and handletouch move
c8b4437 
fix devhatt#26
RafaelLimaC added a commit to RafaelLimaC/pet-dex-frontend that referenced this issue Mar 1, 2024
@RafaelLimaC
feat: add listener do key 'esc', when pressed the value resets
33bf379 
fix devhatt#26
diogocaronte pushed a commit that referenced this issue Mar 2, 2024
@RafaelLimaC
feat: input dinamic range slider (#88)
8a16de8 
* feat: input dinamic range slider

fix #26

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

fix #26

* refactor: add breakpoint and scss vars in style file

fix #26

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

fix #26

* style: hide unit span on mobile devices

fix #26

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

fix #26

* refactor: change variable name for better reading and understanding

fix #26

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

fix #26

* refactor: sepated handlemove into handlemouse and handletouch move

fix #26

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

fix #26
@PiluVitu PiluVitu mentioned this issue Mar 4, 2024
Closed
2 tasks
JonasGz pushed a commit to JonasGz/pet-dex-frontend-p4n4 that referenced this issue Mar 4, 2024
@RafaelLimaC @JonasGz
feat: input dinamic range slider (devhatt#88)
aab6c6d 
* 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
Assignees

@RafaelLimaC RafaelLimaC

Labels
None yet
Projects
PetDex frontend
Status: Closed
Milestone
No milestone
3 participants
@Alecell @anthonymanoel @RafaelLimaC