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

Feature Request : Is there a possibility to disable only few ticks in a slider ? #315

Open
Sindhu-Shekar opened this issue Mar 16, 2022 · 5 comments

Comments

@Sindhu-Shekar
Copy link

Requirement : Possibility to disable only few ticks in a slider, and not the entire slider

Approach : I tried to hide the ticks via css and also specify 'pointer events : none'. Even though the ticks aren't visible, if i click on it's position, the slider pointer moves

Any suggestion/help appreciated

Thank you !

@haadbaig
Copy link

There is an option called "ticksArray". It takes an array of numbers. These numbers are indexes of the values of the stepsArray against which you to show ticks. Using this array you will be able to show selective ticks.

@usamasharif
Copy link

@haadbaig Hey Haad, I need to add minor ticks. Is there a way I can show them?

@haadbaig
Copy link

haadbaig commented Nov 1, 2023

HI Usman, Can you please explain what do you mean by minor ticks?

@usamasharif
Copy link

@haadbaig I need slider to look like this. Please check this screenshot for your reference. As you can see there are ticks, bigger one are called major ticks and smaller one are called minor ticks. I'm able to show major ticks but can't see how I can show minor ticks.
Screenshot 2023-11-01 at 11 20 51 AM

@haadbaig
Copy link

haadbaig commented Nov 1, 2023

Unfortunately, there is not such option in my knowledge that would allow dynamic resizing of the slider ticks. However this can be achieve by manually adding underscores in the stepsArray like this:

stepsArray: [
{ value: 10, legend: '-- 10' },stepsArray: [
{ value: 20, legend: '- 20' },
....

By doing this and adjusting sum : :deep CSS of the ticks, I believe, this is a workaround that can work in this case.

Incase you find any other solution for this, enlighten me as well.

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

No branches or pull requests

3 participants