1- <div id='container'>
2- <div class="col-lg-12 control-section">
3- <div class="slider-content-wrapper">
4- <div class="slider_container" id="slider_wrapper">
5- <div class="slider_labelText userselect">Dynamic ticks color</div>
6- <!-- Ticks slider element -->
7- <ejs-slider id="ticks_slider" value="30" step="5" type="MinRange" renderingTicks="renderingTicksHandler_1">
8- <e-slider-ticksdata placement=Before largeStep="20"></e-slider-ticksdata>
9- </ejs-slider>
10- </div>
11- <div class="slider_container">
12- <div class="slider_labelText userselect">Ticks with legends</div>
13- <!-- Ticks slider element -->
14- <ejs-slider id="slider" value="30" type="MinRange" renderingTicks="renderingTicksHandler_2">
15- <e-slider-ticksdata placement=Both largeStep="20" smallStep="5"></e-slider-ticksdata>
16- </ejs-slider>
17- </div>
1+ <div id='container'>
2+ <div class="col-lg-12 control-section">
3+ <div class="slider-content-wrapper">
4+ <div class="slider_container" id="slider_wrapper">
5+ <div class="slider_labelText userselect">Dynamic ticks color</div>
6+ <!-- Ticks slider element -->
7+ <ejs-slider id="ticks_slider" value="30" step="5" type="MinRange" renderingTicks="renderingTicksHandler_1">
8+ <e-slider-ticksdata placement=Before largeStep="20"></e-slider-ticksdata>
9+ </ejs-slider>
10+ </div>
11+ <div class="slider_container">
12+ <div class="slider_labelText userselect">Ticks with legends</div>
13+ <!-- Ticks slider element -->
14+ <ejs-slider id="slider" value="30" type="MinRange" renderedTicks="renderingTicksHandler_2">
15+ <e-slider-ticksdata placement=Both largeStep="20" smallStep="5"></e-slider-ticksdata>
16+ </ejs-slider>
1817 </div>
1918 </div>
2019 </div>
20+ </div>
2121
2222<script>
23- function renderingTicksHandler_1(args) {
24- if (args.tickElement.classList.contains('e-large')) {
25- args.tickElement.classList.add('e-custom');
23+ function renderingTicksHandler_1(args) {
24+ if (args.tickElement.classList.contains('e-large')) {
25+ args.tickElement.classList.add('e-custom');
26+ }
2627 }
27- }
2828
29- function renderingTicksHandler_2(args) {
30- var li = args.ticksWrapper.getElementsByClassName('e-large');
31- var remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
32- for (var i = 0; i < li.length; ++i) {
33- (li[i].querySelectorAll('.e-tick-both')[1]).innerText = remarks[i];
29+ function renderingTicksHandler_2(args) {
30+ var li = args.ticksWrapper.getElementsByClassName('e-large');
31+ var remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
32+ for (var i = 0; i < li.length; ++i) {
33+ (li[i].querySelectorAll('.e-tick-both')[1]).innerText = remarks[i];
34+ }
3435 }
35- }
3636</script>
3737
3838<style>
39- .slider-content-wrapper {
40- width: 40%;
41- margin: 0 auto;
42- min-width: 185px;
43- }
44-
45- .userselect {
46- -webkit-user-select: none;
47- /* Safari 3.1+ */
48- -moz-user-select: none;
49- /* Firefox 2+ */
50- -ms-user-select: none;
51- /* IE 10+ */
52- user-select: none;
53- /* Standard syntax */
54- }
55-
56- .slider_labelText {
57- text-align: left;
58- font-weight: 500;
59- font-size: 13px;
60- padding-bottom: 40px;
61- }
62-
63- .slider_container {
64- margin-top: 40px;
65- }
66-
67- .e-bigger .slider-content-wrapper {
68- width: 80%;
69- }
70-
71- #ticks_slider .e-range {
72- z-index: unset;
73- }
74-
75- /* csslint ignore:start */
76-
77- #ticks_slider .e-scale .e-tick {
78- background-image: none;
79- visibility: visible;
80- font-family: 'e-customized-icons';
81- }
82-
83- @@font-face {
84- font-family: 'e-customized-icons';
85- src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
86- font-weight: normal;
87- font-style: normal;
88- }
89-
90- /* csslint ignore:end */
91-
92- #ticks_slider .e-scale {
93- z-index: 0;
94- }
95-
96- #ticks_slider .e-scale .e-custom::before {
97- content: '\e967';
98- position: absolute;
99- }
100-
101- #ticks_slider .e-scale :nth-child(1)::before {
102- color: red;
103- }
104-
105- #ticks_slider .e-scale :nth-child(2)::before {
106- color: blue;
107- }
108-
109- #ticks_slider .e-scale :nth-child(3)::before {
110- color: green;
111- }
112-
113- #ticks_slider .e-scale :nth-child(4)::before {
114- color: blueviolet;
115- }
116-
117- #ticks_slider .e-scale :nth-child(5)::before {
118- color: orange;
119- }
120-
121- #ticks_slider .e-scale :nth-child(6)::before {
122- color: pink;
123- }
124-
125- #ticks_slider .e-scale .e-custom::before {
126- font-size: 10px;
127- }
128-
129- #ticks_slider .e-scale .e-custom::before {
130- top: calc(50% + 1px);
131- left: calc(50% - 5px);
132- }
133-
134- #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
135- top: calc(50% + 1px);
136- left: calc(0% - 5px);
137- }
138-
139- #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
140- top: calc(50% + 1px);
141- left: calc(100% - 6px);
142- }
143- </style>
39+ .slider-content-wrapper {
40+ width: 40%;
41+ margin: 0 auto;
42+ min-width: 185px;
43+ }
44+
45+ .userselect {
46+ -webkit-user-select: none;
47+ /* Safari 3.1+ */
48+ -moz-user-select: none;
49+ /* Firefox 2+ */
50+ -ms-user-select: none;
51+ /* IE 10+ */
52+ user-select: none;
53+ /* Standard syntax */
54+ }
55+
56+ .slider_labelText {
57+ text-align: left;
58+ font-weight: 500;
59+ font-size: 13px;
60+ padding-bottom: 40px;
61+ }
62+
63+ .slider_container {
64+ margin-top: 40px;
65+ }
66+
67+ .e-bigger .slider-content-wrapper {
68+ width: 80%;
69+ }
70+
71+ #ticks_slider .e-range {
72+ z-index: unset;
73+ }
74+
75+ /* csslint ignore:start */
76+
77+ #ticks_slider .e-scale .e-tick {
78+ background-image: none;
79+ visibility: visible;
80+ font-family: 'e-customized-icons';
81+ }
82+
83+ @@font-face {
84+ font-family: 'e-customized-icons';
85+ src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
86+ font-weight: normal;
87+ font-style: normal;
88+ }
89+
90+ /* csslint ignore:end */
91+
92+ #ticks_slider .e-scale {
93+ z-index: 0;
94+ }
95+
96+ #ticks_slider .e-scale .e-custom::before {
97+ content: '\e967';
98+ position: absolute;
99+ }
100+
101+ #ticks_slider .e-scale :nth-child(1)::before {
102+ color: red;
103+ }
104+
105+ #ticks_slider .e-scale :nth-child(2)::before {
106+ color: blue;
107+ }
108+
109+ #ticks_slider .e-scale :nth-child(3)::before {
110+ color: green;
111+ }
112+
113+ #ticks_slider .e-scale :nth-child(4)::before {
114+ color: blueviolet;
115+ }
116+
117+ #ticks_slider .e-scale :nth-child(5)::before {
118+ color: orange;
119+ }
120+
121+ #ticks_slider .e-scale :nth-child(6)::before {
122+ color: pink;
123+ }
124+
125+ #ticks_slider .e-scale .e-custom::before {
126+ font-size: 10px;
127+ }
128+
129+ #ticks_slider .e-scale .e-custom::before {
130+ top: calc(50% + 1px);
131+ left: calc(50% - 5px);
132+ }
133+
134+ #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
135+ top: calc(50% + 1px);
136+ left: calc(0% - 5px);
137+ }
138+
139+ #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
140+ top: calc(50% + 1px);
141+ left: calc(100% - 6px);
142+ }
143+ </style>
0 commit comments