Skip to content

Commit 8b6d52d

Browse files
RVenkateshRVenkatesh
committed
Display slider value at the top
On dragging the slider handle, the slider value will be shown at the top the handle instead of left
1 parent 8838488 commit 8b6d52d

File tree

3 files changed

+61
-57
lines changed

3 files changed

+61
-57
lines changed

‎addon/components/ember-slider.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,11 @@ export default Component.extend(RecognizerMixin, {
6363

6464
this.get('onChange')(this.get('value'), newValue);
6565
this.set('value', newValue);
66-
SLIDER_HANDLE.css('left', movedPercentage + '%');
67-
SLIDER_COLOR_FILLER.css('width', movedPercentage + '%');
68-
SLIDER_COLOR_FILLER_CLOSED.css('width', `calc(${movedPercentage}% - 15px)`);
69-
this.addClosenessClass(positionInPX, pathWidth);
66+
let percentageString = movedPercentage + '%';
67+
SLIDER_HANDLE.css('left', percentageString);
68+
SLIDER_COLOR_FILLER.css('width', percentageString);
69+
SLIDER_COLOR_FILLER_CLOSED.css('width', percentageString);
70+
// this.addClosenessClass(positionInPX, pathWidth);
7071
},
7172

7273
moveToInitialValue() {
@@ -84,18 +85,18 @@ export default Component.extend(RecognizerMixin, {
8485
},
8586

8687
// Add classes to the slider based on whether the handle is closer to left end or right end
87-
addClosenessClass(positionInPX, pathWidth) {
88-
if (positionInPX < 50) {
89-
this.set('leftClosing', true);
90-
this.set('rightClosing', false);
91-
} else if (pathWidth - positionInPX < 50) {
92-
this.set('rightClosing', true);
93-
this.set('leftClosing', false);
94-
} else {
95-
this.set('rightClosing', false);
96-
this.set('leftClosing', false);
97-
}
98-
},
88+
// addClosenessClass(positionInPX, pathWidth) {
89+
// if (positionInPX < 50) {
90+
// this.set('leftClosing', true);
91+
// this.set('rightClosing', false);
92+
// } else if (pathWidth - positionInPX < 50) {
93+
// this.set('rightClosing', true);
94+
// this.set('leftClosing', false);
95+
// } else {
96+
// this.set('rightClosing', false);
97+
// this.set('leftClosing', false);
98+
// }
99+
// },
99100

100101
tap(event) {
101102
let tapPosition = event.originalEvent.gesture.srcEvent.pageX;

‎addon/styles/addon.scss‎

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,68 +14,44 @@ body {
1414

1515
@include box-sizing();
1616
position: relative;
17-
overflow: hidden;
1817
&.no-value {
1918
.slider-value {
2019
display: none;
2120
}
2221
}
2322
&.closed {
24-
background-color: $slider-path-color;
25-
border-radius: $handle-width + $handle-padding;
26-
.slider-color-filler {
23+
.slider-pseudo-path {
2724
display: none;
2825
}
29-
.slider-color-filler-closed {
26+
.slider-pseudo-path-closed {
3027
display: block;
3128
}
3229
.slider-handle {
3330
background-color: $slider-filler-color;
34-
&:before {
35-
background-color: $slider-filler-color;
36-
z-index: 1;
37-
}
3831
}
3932
}
4033
&.sliding {
4134
.slider-handle .slider-value {
42-
@include transform(translateX(-105%));
35+
@include transform(translateY(-105%));
4336
@include transition(transform .3s);
4437
.value-mover {
45-
background: #fff;
46-
border: 1px solid #444;
38+
color: #fff;
39+
background: #444;
4740
border-radius: 3px;
4841
position: relative;
4942
&:after {
5043
content: '';
5144
background: transparent;
5245

53-
border-top: 7px solid transparent;
54-
border-right: 0;
55-
border-left: 10px solid #444;
56-
border-bottom: 7px solid transparent;
46+
border-top: 8px solid #444;
47+
border-right: 4px solid transparent;
48+
border-left: 4px solid transparent;
49+
border-bottom: 0;
50+
margin-left: -4px;
5751

5852
position: absolute;
59-
top: 50%;
60-
margin-top: -7px;
61-
left: 100%;
62-
}
63-
}
64-
}
65-
&.left-closing {
66-
.slider-handle .slider-value {
67-
@include transform(translateX(105%));
68-
.value-mover {
69-
&:after {
70-
71-
border-top: 7px solid transparent;
72-
border-left: 0;
73-
border-right: 10px solid #444;
74-
border-bottom: 7px solid transparent;
75-
76-
left: unset;
77-
right: 100%;
78-
}
53+
top: 100%;
54+
left: 50%;
7955
}
8056
}
8157
}
@@ -108,16 +84,38 @@ body {
10884
background-color: $slider-path-color;
10985
width: 100%;
11086
}
111-
.slider-color-filler-closed {
87+
.slider-color-filler-closed, .slider-pseudo-path-closed {
11288
background-color: $slider-filler-color;
11389
width: 0;
11490
height: 100%;
11591
position: absolute;
11692
top: 0;
11793
left: 0;
118-
display: none;
11994
cursor: pointer;
12095
}
96+
.slider-pseudo-path-closed {
97+
background-color: $slider-path-color;
98+
width: 100%;
99+
border-radius: $handle-width + $handle-padding;
100+
101+
display: none;
102+
overflow: hidden;
103+
.filler-guide {
104+
position: absolute;
105+
left: $handle-width / 2;
106+
width: calc(100% - #{$handle-width});
107+
height: 100%;
108+
&:before {
109+
content: '';
110+
background-color: $slider-filler-color;
111+
width: $handle-width / 2;
112+
height: 100%;
113+
114+
position: absolute;
115+
right: 100%;
116+
}
117+
}
118+
}
121119
.slider-handle {
122120
@include transform(translateX(-15px));
123121
text-align: center;

‎addon/templates/components/ember-slider.hbs‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<div class="slider-path">
2-
<div class="slider-pseudo-path"></div>
3-
<div class="slider-color-filler"></div>
2+
<div class="slider-pseudo-path">
3+
<div class="slider-color-filler"></div>
4+
</div>
45
{{slider-handle value=value onStart=(action 'handleMoveStart')}}
56
</div>
6-
<div class="slider-color-filler-closed"></div>
7+
<div class="slider-pseudo-path-closed">
8+
<div class="filler-guide">
9+
<div class="slider-color-filler-closed"></div>
10+
</div>
11+
</div>

0 commit comments

Comments
 (0)