Skip to content

Commit c520185

Browse files
dkamburovdkamburov
authored
Update Slider topics for react 19 (#824)
2 parents 5a96971 + 40cb6b0 commit c520185

10 files changed

Lines changed: 162 additions & 267 deletions

File tree

‎samples/inputs/slider/constraints/src/index.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule } from 'igniteui-react';
4+
import { IgrSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66
import './SliderConstraintsStyle.css';
77

8-
IgrSliderModule.register();
8+
export default function SliderConstraints() {
99

10-
export default class SliderConstraints extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
14-
}
15-
16-
public render(): JSX.Element {
17-
return (
18-
<div className="container sample">
19-
<IgrSlider max={1000} min={100} lowerBound={200} upperBound={800} value={400} primaryTicks={2}/>
20-
</div>
21-
);
22-
}
10+
return (
11+
<div className="container sample">
12+
<IgrSlider max={1000} min={100} lowerBound={200} upperBound={800} value={400} primaryTicks={2}/>
13+
</div>
14+
);
2315
}
2416

25-
// rendering above class to the React DOM
17+
// rendering above component to the React DOM
2618
const root = ReactDOM.createRoot(document.getElementById('root'));
2719
root.render(<SliderConstraints/>);

‎samples/inputs/slider/disabled/src/index.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule } from 'igniteui-react';
4+
import { IgrSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66
import './SliderDisabledStyle.css';
77

8-
IgrSliderModule.register();
8+
export default function SliderDisabled() {
99

10-
export default class SliderDisabled extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
14-
}
15-
16-
public render(): JSX.Element {
17-
return (
18-
<div className="container sample">
19-
<IgrSlider value={40} disabled={true}/>
20-
</div>
21-
);
22-
}
10+
return (
11+
<div className="container sample">
12+
<IgrSlider value={40} disabled={true}/>
13+
</div>
14+
);
2315
}
2416

25-
// rendering above class to the React DOM
17+
// rendering above component to the React DOM
2618
const root = ReactDOM.createRoot(document.getElementById('root'));
2719
root.render(<SliderDisabled/>);

‎samples/inputs/slider/discrete/src/index.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule } from 'igniteui-react';
4+
import { IgrSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66
import './SliderDiscreteStyle.css';
77

8-
IgrSliderModule.register();
8+
export default function SliderDiscrete() {
99

10-
export default class SliderDiscrete extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
14-
}
15-
16-
public render(): JSX.Element {
17-
return (
18-
<div className="container sample">
19-
<IgrSlider step={10} discreteTrack={true}/>
20-
</div>
21-
);
22-
}
10+
return (
11+
<div className="container sample">
12+
<IgrSlider step={10} discreteTrack={true}/>
13+
</div>
14+
);
2315
}
2416

25-
// rendering above class to the React DOM
17+
// rendering above component to the React DOM
2618
const root = ReactDOM.createRoot(document.getElementById('root'));
2719
root.render(<SliderDiscrete/>);

‎samples/inputs/slider/labels/src/index.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,23 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule, IgrSliderLabel, IgrSliderLabelModule } from 'igniteui-react';
4+
import { IgrSlider, IgrSliderLabel } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66
import './SliderLabelsStyle.css';
77

8-
IgrSliderModule.register();
9-
IgrSliderLabelModule.register();
8+
export default function SliderLabels() {
109

11-
export default class SliderLabels extends React.Component<any, any> {
12-
13-
constructor(props: any) {
14-
super(props);
15-
}
16-
17-
public render(): JSX.Element {
18-
return (
19-
<div className="container sample">
20-
<IgrSlider primaryTicks={3} >
21-
<IgrSliderLabel><span>Low</span></IgrSliderLabel>
22-
<IgrSliderLabel><span>Medium</span></IgrSliderLabel>
23-
<IgrSliderLabel><span>High</span></IgrSliderLabel>
24-
</IgrSlider>
25-
</div>
26-
);
27-
}
10+
return (
11+
<div className="container sample">
12+
<IgrSlider primaryTicks={3} >
13+
<IgrSliderLabel><span>Low</span></IgrSliderLabel>
14+
<IgrSliderLabel><span>Medium</span></IgrSliderLabel>
15+
<IgrSliderLabel><span>High</span></IgrSliderLabel>
16+
</IgrSlider>
17+
</div>
18+
);
2819
}
2920

30-
// rendering above class to the React DOM
21+
// rendering above component to the React DOM
3122
const root = ReactDOM.createRoot(document.getElementById('root'));
3223
root.render(<SliderLabels/>);

‎samples/inputs/slider/overview/src/index.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,24 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule, IgrRangeSlider, IgrRangeSliderModule } from 'igniteui-react';
4+
import { IgrSlider, IgrRangeSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66
import './SliderOverviewStyle.css';
77

8-
IgrSliderModule.register();
9-
IgrRangeSliderModule.register();
8+
export default function SliderOverview() {
109

11-
export default class SliderOverview extends React.Component<any, any> {
12-
13-
constructor(props: any) {
14-
super(props);
15-
}
16-
17-
public render(): JSX.Element {
18-
return (
19-
<div className="container sample">
20-
<div className="slider-component">
21-
<span className="slider-label">Slider</span>
22-
<IgrSlider value={40} />
23-
<span className="slider-label">Range Slider</span>
24-
<IgrRangeSlider lower={20} upper={70}></IgrRangeSlider>
25-
</div>
10+
return (
11+
<div className="container sample">
12+
<div className="slider-component">
13+
<span className="slider-label">Slider</span>
14+
<IgrSlider value={40} />
15+
<span className="slider-label">Range Slider</span>
16+
<IgrRangeSlider lower={20} upper={70}></IgrRangeSlider>
2617
</div>
27-
);
28-
}
18+
</div>
19+
);
2920
}
3021

31-
// rendering above class to the React DOM
22+
// rendering above component to the React DOM
3223
const root = ReactDOM.createRoot(document.getElementById('root'));
3324
root.render(<SliderOverview/>);

‎samples/inputs/slider/styling/src/index.tsx‎

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,27 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrRangeSlider, IgrSliderModule } from 'igniteui-react';
4+
import { IgrSlider, IgrRangeSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66
import './SliderStyling.css';
77

8-
IgrSliderModule.register();
8+
export default function SliderStyling() {
99

10-
export default class SliderStyling extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
14-
}
15-
16-
public render(): JSX.Element {
17-
return (
18-
<div className="container sample">
19-
<div className="slider-container">
20-
<span className="slider-label"> Slider</span>
21-
<IgrSlider value={40}/>
22-
</div>
23-
<div className="slider-container">
24-
<span className="slider-label"> Range Slider</span>
25-
<IgrRangeSlider lower={20} upper={70}>
26-
</IgrRangeSlider>
27-
</div>
10+
return (
11+
<div className="container sample">
12+
<div className="slider-container">
13+
<span className="slider-label"> Slider</span>
14+
<IgrSlider value={40}/>
15+
</div>
16+
<div className="slider-container">
17+
<span className="slider-label"> Range Slider</span>
18+
<IgrRangeSlider lower={20} upper={70}>
19+
</IgrRangeSlider>
2820
</div>
29-
);
30-
}
21+
</div>
22+
);
3123
}
3224

33-
// rendering above class to the React DOM
25+
// rendering above component to the React DOM
3426
const root = ReactDOM.createRoot(document.getElementById('root'));
3527
root.render(<SliderStyling/>);

‎samples/inputs/slider/tick-labels/src/index.tsx‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,24 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule } from 'igniteui-react';
4+
import { IgrSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrSliderModule.register();
7+
export default function SliderTickLabels() {
88

9-
export default class SliderTickLabels extends React.Component<any, any> {
10-
11-
constructor(props: any) {
12-
super(props);
13-
}
14-
15-
public render(): JSX.Element {
16-
return (
17-
<div className="container sample">
18-
<IgrSlider style={{padding: "30px 30px 0px 30px"}}
19-
primaryTicks={6}
20-
secondaryTicks={1}
21-
tickOrientation="mirror"
22-
tickLabelRotation={-90}
23-
hideSecondaryLabels={true}>
24-
</IgrSlider>
25-
</div>
26-
);
27-
}
9+
return (
10+
<div className="container sample">
11+
<IgrSlider style={{padding: "30px 30px 0px 30px"}}
12+
primaryTicks={6}
13+
secondaryTicks={1}
14+
tickOrientation="mirror"
15+
tickLabelRotation={-90}
16+
hideSecondaryLabels={true}>
17+
</IgrSlider>
18+
</div>
19+
);
2820
}
2921

30-
// rendering above class to the React DOM
22+
// rendering above component to the React DOM
3123
const root = ReactDOM.createRoot(document.getElementById('root'));
3224
root.render(<SliderTickLabels/>);

‎samples/inputs/slider/ticks/src/index.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrSlider, IgrSliderModule } from 'igniteui-react';
4+
import { IgrSlider } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrSliderModule.register();
7+
export default function SliderTicks() {
88

9-
export default class SliderTicks extends React.Component<any, any> {
10-
11-
constructor(props: any) {
12-
super(props);
13-
}
14-
15-
public render(): JSX.Element {
16-
return (
17-
<div className="container sample">
18-
<IgrSlider style={{padding: "30px 30px 0px 30px"}}
19-
primaryTicks={3}
20-
secondaryTicks={4} />
21-
</div>
22-
);
23-
}
9+
return (
10+
<div className="container sample">
11+
<IgrSlider style={{padding: "30px 30px 0px 30px"}}
12+
primaryTicks={3}
13+
secondaryTicks={4} />
14+
</div>
15+
);
2416
}
2517

26-
// rendering above class to the React DOM
18+
// rendering above component to the React DOM
2719
const root = ReactDOM.createRoot(document.getElementById('root'));
2820
root.render(<SliderTicks/>);

0 commit comments

Comments
 (0)