Skip to content

Conversation

iveysaur
Copy link
Contributor

Add tick interval to slider. A tick interval of auto will find a tick separation of at least 30px, otherwise the tick separation value is calculated by the number given.

The tick interval is based off of the step, meaning a slider with a step of 3 and a tick interval of 4 will draw ticks every 4 steps/every 12 values.

A tick is always drawn at the end of a slider, with the second to last tick being removed if it is too close to the last one.

A repeating linear background is used to draw the ticks because I believe it is more performant/easier than creating multiple divs or using a canvas. This needs to be tested still.

R: @jelbourn @kara
CC: @hansl @robertmesserle

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 27, 2016
}

set tickInterval(v: 'auto' | number) {
if (v == 'auto') {
Copy link
Contributor

Choose a reason for hiding this comment

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

You can safely ignore this if and straight do this._tickInterval = v

@iveysaur iveysaur changed the title Slider ticks Add support for drawing tick marks on the slider Jul 31, 2016
@iveysaur
Copy link
Contributor Author

iveysaur commented Aug 2, 2016

@jelbourn: Addressed comments.


// This calculates which step is far enough away from the beginning of the slider to draw a tick
// at. This value will then be used to draw ticks at every tickStep steps.
let tickStep =
Copy link
Member

Choose a reason for hiding this comment

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

I think this would benefit from some more explanation as to where the calculation came from.

@jelbourn
Copy link
Member

jelbourn commented Aug 2, 2016

LGTM

@iveysaur iveysaur added the action: merge The PR is ready for merge by the caretaker label Aug 4, 2016
@jelbourn jelbourn merged commit ae5717c into angular:master Aug 8, 2016
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants