Skip to content

Commit 12515c6

Browse files
SaiYugandhar03SaiYugandhar03
authored
docs(slider): add validation example (#2455)
1 parent e5f7f1d commit 12515c6

17 files changed

Lines changed: 432 additions & 0 deletions

File tree

‎packages/angular-standalone-test-app/src/app/app.routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,8 @@ export const routePaths: IxPreviewRoutes = {
426426
import('../preview-examples/slider-marker').then((m) => m.default),
427427
'preview/slider-trace': () =>
428428
import('../preview-examples/slider-trace').then((m) => m.default),
429+
'preview/slider-validation': () =>
430+
import('../preview-examples/slider-validation').then((m) => m.default),
429431
'preview/spinner': () =>
430432
import('../preview-examples/spinner').then((m) => m.default),
431433
'preview/spinner-large': () =>

‎packages/angular-standalone-test-app/src/preview-examples/slider-validation.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!--
2+
SPDX-FileCopyrightText: 2025 Siemens AG
3+
4+
SPDX-License-Identifier: MIT
5+
6+
This source code is licensed under the MIT license found in the
7+
LICENSE file in the root directory of this source tree.
8+
-->
9+
10+
<div>
11+
<ix-slider
12+
label="Info"
13+
value="10"
14+
trace
15+
info-text="Info text"
16+
class="ix-info"
17+
>
18+
<span slot="label-start">0</span>
19+
<span slot="label-end">100</span>
20+
</ix-slider>
21+
</div>
22+
23+
<div>
24+
<ix-slider
25+
label="Warning"
26+
value="90"
27+
trace
28+
warningText="Warning text"
29+
class="ix-warning"
30+
>
31+
<span slot="label-start">0</span>
32+
<span slot="label-end">100</span>
33+
</ix-slider>
34+
</div>
35+
36+
<div>
37+
<ix-slider
38+
label="Valid"
39+
value="10"
40+
trace
41+
validText="Valid text"
42+
class="ix-valid"
43+
>
44+
<span slot="label-start">0</span>
45+
<span slot="label-end">100</span>
46+
</ix-slider>
47+
</div>
48+
49+
<div>
50+
<ix-slider
51+
label="Invalid"
52+
value="100"
53+
trace
54+
invalidText="Invalid text"
55+
class="ix-invalid"
56+
>
57+
<span slot="label-start">0</span>
58+
<span slot="label-end">100</span>
59+
</ix-slider>
60+
</div>

‎packages/angular-standalone-test-app/src/preview-examples/slider-validation.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2025 Siemens AG
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import { Component } from '@angular/core';
11+
import { IxSlider } from '@siemens/ix-angular/standalone';
12+
13+
@Component({
14+
selector: 'app-example',
15+
imports: [IxSlider],
16+
templateUrl: './slider-validation.html',
17+
})
18+
export default class SliderValidation {}

‎packages/angular-test-app/src/app/app-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ import Slider from '../preview-examples/slider';
197197
import SliderError from '../preview-examples/slider-error';
198198
import SliderMarker from '../preview-examples/slider-marker';
199199
import SliderTrace from '../preview-examples/slider-trace';
200+
import SliderValidation from '../preview-examples/slider-validation';
200201
import Spinner from '../preview-examples/spinner';
201202
import SpinnerLarge from '../preview-examples/spinner-large';
202203
import SplitButton from '../preview-examples/split-button';
@@ -864,6 +865,10 @@ const routes: Routes = [
864865
path: 'slider-trace',
865866
component: SliderTrace,
866867
},
868+
{
869+
path: 'slider-validation',
870+
component: SliderValidation,
871+
},
867872
{
868873
path: 'slider',
869874
component: Slider,
@@ -1038,6 +1043,7 @@ const routes: Routes = [
10381043
{ path: 'slider-trace', component: SliderTrace },
10391044
{ path: 'slider-marker', component: SliderMarker },
10401045
{ path: 'slider-error', component: SliderError },
1046+
{ path: 'slider-validation', component: SliderValidation },
10411047
{ path: 'grid', component: Grid },
10421048
{ path: 'grid-size', component: GridSize },
10431049
{ path: 'grid-padding', component: GridPadding },

‎packages/angular-test-app/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ import Slider from '../preview-examples/slider';
205205
import SliderError from '../preview-examples/slider-error';
206206
import SliderMarker from '../preview-examples/slider-marker';
207207
import SliderTrace from '../preview-examples/slider-trace';
208+
import SliderValidation from '../preview-examples/slider-validation';
208209
import Spinner from '../preview-examples/spinner';
209210
import SpinnerLarge from '../preview-examples/spinner-large';
210211
import SplitButton from '../preview-examples/split-button';
@@ -416,6 +417,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
416417
SliderError,
417418
SliderMarker,
418419
SliderTrace,
420+
SliderValidation,
419421
Slider,
420422
SpinnerLarge,
421423
Spinner,

‎packages/angular-test-app/src/preview-examples/slider-validation.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!--
2+
SPDX-FileCopyrightText: 2024 Siemens AG
3+
4+
SPDX-License-Identifier: MIT
5+
6+
This source code is licensed under the MIT license found in the
7+
LICENSE file in the root directory of this source tree.
8+
-->
9+
10+
<div>
11+
<ix-slider
12+
label="Info"
13+
value="10"
14+
trace
15+
info-text="Info text"
16+
class="ix-info"
17+
>
18+
<span slot="label-start">0</span>
19+
<span slot="label-end">100</span>
20+
</ix-slider>
21+
</div>
22+
23+
<div>
24+
<ix-slider
25+
label="Warning"
26+
value="90"
27+
trace
28+
warningText="Warning text"
29+
class="ix-warning"
30+
>
31+
<span slot="label-start">0</span>
32+
<span slot="label-end">100</span>
33+
</ix-slider>
34+
</div>
35+
36+
<div>
37+
<ix-slider
38+
label="Valid"
39+
value="10"
40+
trace
41+
validText="Valid text"
42+
class="ix-valid"
43+
>
44+
<span slot="label-start">0</span>
45+
<span slot="label-end">100</span>
46+
</ix-slider>
47+
</div>
48+
49+
<div>
50+
<ix-slider
51+
label="Invalid"
52+
value="100"
53+
trace
54+
invalidText="Invalid text"
55+
class="ix-invalid"
56+
>
57+
<span slot="label-start">0</span>
58+
<span slot="label-end">100</span>
59+
</ix-slider>
60+
</div>

‎packages/angular-test-app/src/preview-examples/slider-validation.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2024 Siemens AG
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import { Component } from '@angular/core';
11+
12+
@Component({
13+
standalone: false,
14+
selector: 'app-example',
15+
templateUrl: './slider-validation.html',
16+
})
17+
export default class SliderValidation {}

‎packages/html-test-app/src/preview-examples/slider-validation.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!--
2+
SPDX-FileCopyrightText: 2024 Siemens AG
3+
4+
SPDX-License-Identifier: MIT
5+
6+
This source code is licensed under the MIT license found in the
7+
LICENSE file in the root directory of this source tree.
8+
-->
9+
10+
<!DOCTYPE html>
11+
<html lang="en">
12+
<head>
13+
<meta charset="UTF-8" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15+
<title>Slider validation example</title>
16+
</head>
17+
<body>
18+
<div>
19+
<ix-slider
20+
label="Info"
21+
value="10"
22+
trace
23+
info-text="Info text"
24+
class="ix-info"
25+
>
26+
<span slot="label-start">0</span>
27+
<span slot="label-end">100</span>
28+
</ix-slider>
29+
</div>
30+
31+
<div>
32+
<ix-slider
33+
label="Warning"
34+
value="90"
35+
trace
36+
warning-text="Warning text"
37+
class="ix-warning"
38+
>
39+
<span slot="label-start">0</span>
40+
<span slot="label-end">100</span>
41+
</ix-slider>
42+
</div>
43+
44+
<div>
45+
<ix-slider
46+
label="Valid"
47+
value="10"
48+
trace
49+
valid-text="Valid text"
50+
class="ix-valid"
51+
>
52+
<span slot="label-start">0</span>
53+
<span slot="label-end">100</span>
54+
</ix-slider>
55+
</div>
56+
57+
<div>
58+
<ix-slider
59+
label="Invalid"
60+
value="100"
61+
trace
62+
invalid-text="Invalid text"
63+
class="ix-invalid"
64+
>
65+
<span slot="label-start">0</span>
66+
<span slot="label-end">100</span>
67+
</ix-slider>
68+
</div>
69+
70+
<script type="module" src="./init.js"></script>
71+
</body>
72+
</html>

‎packages/react-test-app/src/main.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ import Slider from './preview-examples/slider';
198198
import SliderError from './preview-examples/slider-error';
199199
import SliderMarker from './preview-examples/slider-marker';
200200
import SliderTrace from './preview-examples/slider-trace';
201+
import SliderValidation from './preview-examples/slider-validation';
201202
import Spinner from './preview-examples/spinner';
202203
import SpinnerLarge from './preview-examples/spinner-large';
203204
import SplitButton from './preview-examples/split-button';
@@ -406,6 +407,7 @@ const routes: IxPreviewRoutes = {
406407
'/preview/slider-error': SliderError,
407408
'/preview/slider-marker': SliderMarker,
408409
'/preview/slider-trace': SliderTrace,
410+
'/preview/slider-validation': SliderValidation,
409411
'/preview/slider': Slider,
410412
'/preview/spinner-large': SpinnerLarge,
411413
'/preview/spinner': Spinner,

‎packages/react-test-app/src/preview-examples/slider-validation.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2024 Siemens AG
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import { IxSlider } from '@siemens/ix-react';
11+
12+
export default () => {
13+
return (
14+
<>
15+
<div>
16+
<IxSlider
17+
label="Info"
18+
value={10}
19+
trace
20+
info-text="Info text"
21+
className="ix-info"
22+
>
23+
<span slot="label-start">0</span>
24+
<span slot="label-end">100</span>
25+
</IxSlider>
26+
</div>
27+
28+
<div>
29+
<IxSlider
30+
label="Warning"
31+
value={90}
32+
trace
33+
warningText="Warning text"
34+
className="ix-warning"
35+
>
36+
<span slot="label-start">0</span>
37+
<span slot="label-end">100</span>
38+
</IxSlider>
39+
</div>
40+
41+
<div>
42+
<IxSlider
43+
label="Valid"
44+
value={10}
45+
trace
46+
validText="Valid text"
47+
className="ix-valid"
48+
>
49+
<span slot="label-start">0</span>
50+
<span slot="label-end">100</span>
51+
</IxSlider>
52+
</div>
53+
54+
<div>
55+
<IxSlider
56+
label="Invalid"
57+
value={100}
58+
trace
59+
invalidText="Invalid text"
60+
className="ix-invalid"
61+
>
62+
<span slot="label-start">0</span>
63+
<span slot="label-end">100</span>
64+
</IxSlider>
65+
</div>
66+
</>
67+
);
68+
};

0 commit comments

Comments
 (0)