angular-slider / angular-slider/ngx-slider

Add tooltip (including custom one) on hover on slider's bar without ticks adding

Open
#175 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
411
Forks
176
PR merge metrics
No merged PRs in 30d

Description

Now it is possible to add tooltip only when ticks are present. There is no a possibility to add tooltip without ticks. Sometime I do not want to show ticks, but want to have tooltips during hovering on slider. Also not in all cases ticks can be added. For example if values range [min,max] is too big, adding spans for ticks in unusable (DOM becames too big), but I still can want to have tooltips to see a possible value which will be selected by click on slider on current mouse position.

This is a mockup from designer.

image

As you can see, max value of range is 1632. It is impossible to add 1632 ticks at least because it does not make sence.

Now to implement that "show mouse value on hover" requirement I'm going to do it manually using slider size, values range and mouse offset position to calculate a possible value. It will be so better if this functionality will be provided by your control.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the slider's existing tooltip and tick behavior, then compare it with the hover interaction shown in the linked mockup. Done means the slider can show the current mouse value without ticks, supports a custom tooltip, and remains usable for large ranges such as 0–1632.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.