Skip to content

Commit

Permalink
Better explain the calculations for the auto tick location.
Browse files Browse the repository at this point in the history
  • Loading branch information
iveysaur committed Aug 4, 2016
1 parent 4ecf6d9 commit b885901
Showing 1 changed file with 20 additions and 8 deletions.
28 changes: 20 additions & 8 deletions src/components/slider/slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,19 +244,31 @@ export class MdSlider implements AfterContentInit {
* separation constant.
*/
private _updateAutoTickSeparation() {
let width = this._sliderDimensions.width;
// We're looking for the multiple of step for which the separation between is greater than the
// minimum tick separation.
let sliderWidth = this._sliderDimensions.width;

// 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 =
Math.ceil(MIN_AUTO_TICK_SEPARATION * (this.max - this.min) / (width * this.step));
// This is the total "width" of the slider in terms of values.
let valueWidth = this.max - this.min;

// The percentage of the slider where the first tick should go.
let tickPercentage = this.calculatePercentage((this.step * tickStep) + this.min);
// Calculate how many values exist within 1px on the slider.
let valuePerPixel = valueWidth / sliderWidth;

// Calculate how many values exist in the minimum tick separation (px).
let valuePerSeparation = valuePerPixel * MIN_AUTO_TICK_SEPARATION;

// Calculate how many steps exist in this separation. This will be the lowest value you can
// multiply step by to get a separation that is greater than or equal to the minimum tick
// separation.
let stepsPerSeparation = Math.ceil(valuePerSeparation / this.step);

// Get the percentage of the slider for which this tick would be located so we can then draw
// it on the slider.
let tickPercentage = this.calculatePercentage((this.step * stepsPerSeparation) + this.min);

// The pixel value of the tick is the percentage * the width of the slider. Use this to draw
// the ticks on the slider.
this._renderer.drawTicks(width * tickPercentage);
this._renderer.drawTicks(sliderWidth * tickPercentage);
}

/**
Expand Down

0 comments on commit b885901

Please sign in to comment.