;
+
+ /**
+ * @hidden
+ */
+ @HostBinding('class.igx-slider__ticks')
+ public ticksClass = true;
+
+ /**
+ * @hidden
+ */
+ @HostBinding('class.igx-slider__ticks--top')
+ public get ticksTopClass() {
+ return this.ticksOrientation === TicksOrientation.top;
+ }
+
+ /**
+ * @hidden
+ */
+ @HostBinding('class.igx-slider__ticks--tall')
+ public get hasPrimaryClass() {
+ return this.primaryTicks > 0;
+ }
+
+ /**
+ * @hidden
+ */
+ @HostBinding('class.igx-slider__tick-labels--top-bottom')
+ public get labelsTopToBottomClass() {
+ return this.tickLabelsOrientation === TickLabelsOrientation.toptobottom;
+ }
+
+ /**
+ * @hidden
+ */
+ @HostBinding('class.igx-slider__tick-labels--bottom-top')
+ public get labelsBottomToTopClass() {
+ return this.tickLabelsOrientation === TickLabelsOrientation.bottomtotop;
+ }
+
+ /**
+ * Returns the template context corresponding to
+ * {@link IgxTickLabelTemplateDirective}
+ *
+ * ```typescript
+ * return {
+ * $implicit //returns the value per each tick label.
+ * isPrimery //returns if the tick is primary.
+ * labels // returns the {@link labels} collection.
+ * index // returns the index per each tick of the whole sequence.
+ * }
+ * ```
+ *
+ * @param idx the index per each tick label.
+ */
+ public context(idx: number): any {
+ return {
+ $implicit: this.tickLabel(idx),
+ isPrimary: this.isPrimary(idx),
+ labels: this.labels,
+ index: idx
+ };
+ }
+
+ /**
+ * @hidden
+ */
+ public get ticksLength() {
+ return this.primaryTicks > 0 ?
+ ((this.primaryTicks - 1) * this.secondaryTicks) + this.primaryTicks :
+ this.secondaryTicks > 0 ? this.secondaryTicks : 0;
+ }
+
+ public hiddenTickLabels(idx: number) {
+ return this.isPrimary(idx) ? this.primaryTickLabels : this.secondaryTickLabels;
+ }
+
+ /**
+ * @hidden
+ */
+ public isPrimary(idx: number) {
+ return this.primaryTicks <= 0 ? false :
+ idx % (this.secondaryTicks + 1) === 0;
+ }
+
+ /**
+ * @hidden
+ */
+ public tickLabel(idx: number) {
+ if (this.labelsViewEnabled) {
+ return this.labels[idx];
+ }
+
+ const labelStep = (Math.max(this.minValue, this.maxValue) - Math.min(this.minValue, this.maxValue)) / (this.ticksLength - 1);
+ const labelVal = labelStep * idx;
+
+ return (this.minValue + labelVal).toFixed(2);
+ }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ba2632a7333..4b2b039262e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -236,7 +236,8 @@ const components = [
IgxDragDropModule,
IgxDividerModule,
SharedModule,
- routing
+ routing,
+ HammerModule
],
providers: [
LocalService,
diff --git a/src/app/slider/slider.sample.html b/src/app/slider/slider.sample.html
index 36261d82305..f4126fc30ed 100644
--- a/src/app/slider/slider.sample.html
+++ b/src/app/slider/slider.sample.html
@@ -1,17 +1,37 @@
-
+
+
Slider
- Slider
-
+
+
+
+
+
+
+
+
+
+
-
+
+ Range label slider
{{getLowerVal}}
{{getUpperVal}}
-
+
+
diff --git a/src/app/slider/slider.sample.scss b/src/app/slider/slider.sample.scss
index 48de94d0a60..f5390cd2e0c 100644
--- a/src/app/slider/slider.sample.scss
+++ b/src/app/slider/slider.sample.scss
@@ -14,5 +14,16 @@
.outer-label {
width: 20%;
text-align: center;
- padding-top: 10px
+ padding-top: 10px;
+}
+
+.sample-component {
+ position: relative;
+ width: 100%;
+ padding-top: 70px;
+}
+
+igx-slider {
+ width: 80%;
+ margin: 50px auto;
}
diff --git a/src/app/slider/slider.sample.ts b/src/app/slider/slider.sample.ts
index 926a209cede..71e59b1f319 100644
--- a/src/app/slider/slider.sample.ts
+++ b/src/app/slider/slider.sample.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { SliderType, ISliderValueChangeEventArgs, IRangeSliderValue } from 'igniteui-angular';
+import { SliderType, ISliderValueChangeEventArgs, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from 'igniteui-angular';
class Task {
title: string;
@@ -20,12 +20,18 @@ export class SliderSampleComponent {
private _lowerValue: Date;
private _upperValue: Date;
+ public labelOrientaion = TickLabelsOrientation.horizontal;
+ public ticksOrientation = TicksOrientation.bottom;
+ public primaryTickLabels = true;
+ public secondaryTickLabels = true;
public sliderType: SliderType = SliderType.RANGE;
- public labels = new Array();
+ public labelsDates = new Array();
+ public task: Task = new Task('Implement new app', 30);
+ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
public rangeValue = {
- lower: 30,
- upper: 60
+ lower: 34,
+ upper: 67
};
public rangeLabel = {
@@ -35,11 +41,11 @@ export class SliderSampleComponent {
constructor() {
for (let i = 0; i <= 500; i++) {
- this.labels.push(new Date(2019, 10, i));
+ this.labelsDates.push(new Date(2019, 10, i));
}
- this._lowerValue = this.labels[0];
- this._upperValue = this.labels[this.labels.length - 1];
+ this._lowerValue = this.labelsDates[0];
+ this._upperValue = this.labelsDates[this.labels.length - 1];
}
public get getLowerVal() {
@@ -51,9 +57,40 @@ export class SliderSampleComponent {
}
public valueChange(evt: ISliderValueChangeEventArgs) {
- this._lowerValue = this.labels[(evt.value as IRangeSliderValue).lower];
- this._upperValue = this.labels[(evt.value as IRangeSliderValue).upper];
+ this._lowerValue = this.labelsDates[(evt.value as IRangeSliderValue).lower];
+ this._upperValue = this.labelsDates[(evt.value as IRangeSliderValue).upper];
+ }
+
+ public changeLabels() {
+ this.labels = new Array('asd', 'bsd');
+ }
+
+ public changeLabelOrientation() {
+ if (this.labelOrientaion === TickLabelsOrientation.horizontal) {
+ this.labelOrientaion = TickLabelsOrientation.toptobottom;
+ } else if(this.labelOrientaion === TickLabelsOrientation.toptobottom) {
+ this.labelOrientaion = TickLabelsOrientation.bottomtotop;
+ } else {
+ this.labelOrientaion = TickLabelsOrientation.horizontal;
+ }
+ }
+
+ public changeTicksOrientation() {
+ if (this.ticksOrientation === TicksOrientation.mirror) {
+ this.ticksOrientation = TicksOrientation.top;
+ } else if (this.ticksOrientation === TicksOrientation.top) {
+ this.ticksOrientation = TicksOrientation.bottom;
+ } else {
+ this.ticksOrientation = TicksOrientation.mirror;
+ }
+ }
+
+ public tickLabel(value, primary, index, labels) {
+ if (primary) {
+ return Math.round(value);
+ }
+
+ return value;
}
- task: Task = new Task('Implement new app', 30);
}