This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathticks.tsx
More file actions
147 lines (141 loc) · 8.12 KB
/
ticks.tsx
File metadata and controls
147 lines (141 loc) · 8.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { SampleBase } from '../common/sample-base';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { PropertyPane } from '../common/property-pane';
const slidercss = `
.content-wrapper {
width: 52%;
margin: 0 auto;
min-width: 185px;
}
.sliderwrap {
margin-top: 45px;
}
.e-bigger .content-wrapper {
width: 80%;
}
.sliderwrap label {
padding-bottom: 50px;
font-size: 13px;
font-weight: 500;
margin-top: 15px;
}
.userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
`
export class Ticks extends SampleBase<{}, {}> {
// Instance of the control
private listObj: DropDownListComponent;
private defaultObj: SliderComponent;
private rangeObj: SliderComponent;
// Initialize ticks with placement, largestep, smallstep
public defaultTicks: object = { placement: 'Before', largeStep: 0.20, smallStep: 0.05, showSmallTicks: true };
public rangeTicks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
//Dropdownlist datasource values for changing ticks placement for slider component
public option: { [key: string]: Object }[] = [{ text: 'Before', value: 'Before' }, { text: 'After', value: 'After' },
{ text: 'Both', value: 'Both' }, { text: 'None', value: 'None' }];
public fields: object = { value: 'value', text: 'text' };
// Handling the dropdown list change event to change slider ticks position
public change(): void {
this.defaultObj.ticks = { placement: this.listObj.value as any };
this.defaultObj.dataBind();
this.rangeObj.ticks = { placement: this.listObj.value as any };
this.rangeObj.dataBind();
}
// Handler used to enable or disable sliders
public onChange(args: ChangeEventArgs): void {
this.defaultObj.enabled = !args.checked;
this.rangeObj.enabled = !args.checked;
}
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<div className='col-lg-8'>
<div className="content-wrapper">
<style>{slidercss}</style>
<div className='sliderwrap'>
<label>Default Slider</label>
{/* Initialize Slider Component with ticks with placement, largestep, smallstep */}
<SliderComponent value={0.3} min={0.1} max={0.9} step={0.05} ticks={this.defaultTicks} ref={(slider) => { this.defaultObj = slider }} />
</div>
<div className='sliderwrap'>
<label>Range Slider</label>
{/* Initialize Range Slider Component with ticks with placement, largestep, smallstep */}
<SliderComponent value={[30, 70]} min={10} max={90} step={5} type='Range' ticks={this.rangeTicks} ref={(slider) => { this.rangeObj = slider }} />
</div>
</div>
</div>
<div id="#slider_event" className='col-lg-4 property-section'>
<PropertyPane title='Properties'>
<table id="property" title="Properties" className='property-panel-table' style={{ width: '100%' }}>
<tbody>
<tr>
<td style={{ width: '50%' }}>
<div className="userselect">Placement</div>
</td>
<td style={{ width: '50%', paddingRight: '10px' }}>
<div>
<DropDownListComponent dataSource={this.option} fields={this.fields} index={0} placeholder="Select a Placement" popupHeight="200px" ref={(dropdownlist) => { this.listObj = dropdownlist }} change={this.change.bind(this)} />
</div>
</td>
</tr>
<tr>
<td style={{ width: '50%', paddingTop: '12px' }}>
<div className="userselect">Disabled</div>
</td>
<td style={{ width: '50%', paddingRight: '10px' }}>
<div style={{ paddingleft: 0, paddingtop: 0 }}>
{/* Initialize checkbox Component */}
<CheckBoxComponent checked={false} change={this.onChange.bind(this)}></CheckBoxComponent>
</div>
</td>
</tr>
</tbody>
</table>
</PropertyPane>
</div>
<div id="action-description">
<p>This sample demonstrates the rendering of Slider component with Ticks placement. Drag the thumb over the bar for selecting
the values between min and max.</p>
</div>
<div id="description">
<p>The Ticks are the visual representation of the Slider values. The ticks are differentiated as small ticks and large ticks
based on its size. The ticks position can be defined by the
<a target="_blank" href="http://ej2.syncfusion.com/documentation/slider/api-ticksData.html?lang=es6#smallstep-number"> smallStep</a> and
<a target="_blank" href="http://ej2.syncfusion.com/documentation/slider/api-ticksData.html?lang=es6#smallstep-number"> largeStep </a>properties.</p>
<p> In this demo, we have demonstrated Ticks position with Default and Range Slider.</p>
<ul>
<li>Default Slider – In this sample, the small ticks and large ticks are rendered with the frequency of 0.05 and 0.20.</li>
<li>Range Slider – In this sample, the small ticks and large ticks are rendered with the frequency of 5 and 20.</li>
</ul>
<p> We can also change the Ticks placement of Slider and Disable Slider component from the property pane.</p>
<p>We can use the below property to restrict the value range for the slider:</p>
<ul>
<li>
<a target="_blank" href="http://ej2.syncfusion.com/documentation/slider/api-slider.html?lang=es6#step-string---number">step </a> - to define incremental/decremental step value for slider</li>
<li>
<a target="_blank" href="http://ej2.syncfusion.com/documentation/slider/api-slider.html?lang=es6#min-string---number">min </a> – to specify minimum value of the slider</li>
<li>
<a target="_blank" href="http://ej2.syncfusion.com/documentation/slider/api-slider.html?lang=es6#max-string---number">max </a> – to specify maximum value of the slider</li>
</ul>
<p>For more information, we can refer the
<a target="_blank" href="http://ej2.syncfusion.com/documentation/slider/ticks.html?lang=es6">ticks</a> section from the documentation.</p>
</div>
</div>
</div>
)
}
}