ion-range, snap ticks out of range (screen)

[Alx101]

Short description of the problem:

ion-range snap steps are off-screen, with negative positional values.

What behavior are you expecting?

ion-range steps to be placed at correct step-intervals along the range bar.

Steps to reproduce:

1. add ion-range inside an ion-item
2. put two labels, left and right, inside this ion-range
3. set ion-range min to 2499, set max to 5199, set snaps to true and step to 5199
4. see the range marker disappear off-screen. Look at range-tick css and see negative position values.

<ion-item>
      <ion-range step="5199" max="5199" min="2499" snaps="true" [(ngModel)]="val">
        <ion-label range-left>Some text</ion-label>
        <ion-label range-right>{{val}}</ion-label>
      </ion-range>
</ion-item>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
Ionic 2 rc0

Plunker that shows an example of your issue

http://plnkr.co/edit/Gh1HokLkh0xyTNWUrEVe?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 8.0 Build version 8A218a

@adamdbradley

[Alx101]

I want to add some info to this issue. While this may not be "default usage" of the component, I expect it to limit the "snap ticks" to the bar itself. Changing around the min, max and step values make them kind of go haywire.

TL;DR;
Limit stepping ticks to the width of the slider bar itself, i.e don't allow them to go outside the "bounsd" of the slider.