diff --git a/ej2-asp-core-mvc/code-snippet/slider/buttons/tagHelper b/ej2-asp-core-mvc/code-snippet/slider/buttons/tagHelper index 651fb86d2a..4d34e06dab 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/buttons/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/slider/buttons/tagHelper @@ -1,3 +1,2 @@ - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/slider/custom-bar/tagHelper b/ej2-asp-core-mvc/code-snippet/slider/custom-bar/tagHelper index 02976a8dc9..2f930dff8e 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/custom-bar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/slider/custom-bar/tagHelper @@ -1,25 +1,25 @@ -
-
-
-
-
Height
- - -
-
-
Gradient color
- - -
-
-
Dynamic thumb and selection bar color
- - -
+
+
+
+
+
Height
+ + +
+
+
Gradient color
+ + +
+
+
Dynamic thumb and selection bar color
+ +
- +
+ + .slider-content-wrapper { + width: 40%; + margin: 0 auto; + min-width: 185px; + } + + .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 */ + } + + .slider_labelText { + text-align: left; + font-weight: 500; + font-size: 13px; + padding-bottom: 40px; + } + + .slider_container { + margin-top: 40px; + } + + .e-bigger .slider-content-wrapper { + width: 80%; + } + + #ticks_slider .e-range { + z-index: unset; + } + + /* csslint ignore:start */ + + #ticks_slider .e-scale .e-tick { + background-image: none; + visibility: visible; + font-family: 'e-customized-icons'; + } + + @@font-face { + font-family: 'e-customized-icons'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8iS4cAAAEoAAAAVmNtYXDS5tJrAAABjAAAAEBnbHlmdMAKbQAAAdQAAAOwaGVhZBNseyYAAADQAAAANmhoZWEHogNjAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQCaAdgAAAHMAAAACG1heHABEAEuAAABCAAAACBuYW1lc0cOBgAABYQAAAIlcG9zdNSlKbQAAAesAAAARwABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAtxzLE18PPPUACwPoAAAAANgtmycAAAAA2C2bJwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAADASIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6QLpZwNS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAukC6Wf//wAA6QLpZ///AAAAAAABAAYABgAAAAEAAgAAAAAAmgHYAAIAAAAAA+oD6gAzAIcAAAEzHxghNT8WEx8THQEPEisBLxI9AT8SAgAQECQmKCgpKScTEhIREA8ODQwKCgQHBQQBAfwqAQMFBgcKCgwNDg8QERISEycpKSgoJiQgDQwMDAwXFhUUEhEPDQsJCAIDAQEBAQMCCAkLDQ8REhQVFhcMDAwMDQ0MDAwMFxYVFBIRDw0LCQgCAwEBAQEDAggJCw0PERIUFRYXDAwMDAGFAQMEBwkKDQ4ICAkKCgoLCwwMDAcNDg8Og3sPDw4NDgwMDAsLCgoKCQgIDg0KCQcEAwJnAQEBAgMHCgsNDxESExUWFwwMDQwNDA0MDAwXFhUTExAPDQwJBwMCAgEBAgIDBwkMDQ8QExMVFhcMDAwNDA0MDQwMFxYVExIRDw0LCgcDAgEBAAAAAwAAAAAD8wPzAF8AwAEhAAABDxMfFz8XLxcPAjcfFA8XLxc/Fx8CJw8UHxc/Fy8XDwIBqRQUFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUFBQVFhYWFhYWFRUTFBISERAQDg0NCwoJBwcFBAIBAQIEBQcHCQoLDQ0OEBAREhIUExUVFhYWFhYWtg4NGxkZGBYWFRMSEA8OCwsIBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxkZGBYWFRMSEA8NDAsIBwUDAQEDBQcICwsODxASExUVFxgZGRsbHB0dHh4dHd0QDx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIREA0MCQgGAwEBAwYICQwNEBESFRYXGRobHB4eHyEgIiIiIiEDPAYICQoLDQ0OEBAREhITFBUVFRYXFhYWFRQUFBISERAQDg0MDAoJBwcFBAIBAQIEBQcHCQoMDA0OEBAREhIUFBQVFhYWFxYVFRUUExISERAQDg0NCwoJCAYFBAIBAQIEZAQECgwODxASExUVFxgYGhsbHB0dHh4dHRwbGxkZGBYWFBQSEA8NDAoJBwUDAQEDBQcICwsODxASExUWFhgZGRsbHB0dHh4dHRwbGxoYGBcVFRMSEA8OCwsIBwUDAQEDBTYFBQwNEBESFRYXGRobHB0fHyEgIiIiIiEgHx4eHBsaGRcWFBMRDw4MCQgGAwEBAwYICQwODxETFBYXGRobHB4eHyEgIiIiIiAhHx4eHBsaGRcWFRIRDw4MCQgGAwEBAwYAAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAHAAEAAQAAAAAAAgAHAAgAAQAAAAAAAwAHAA8AAQAAAAAABAAHABYAAQAAAAAABQALAB0AAQAAAAAABgAHACgAAQAAAAAACgAsAC8AAQAAAAAACwASAFsAAwABBAkAAAACAG0AAwABBAkAAQAOAG8AAwABBAkAAgAOAH0AAwABBAkAAwAOAIsAAwABBAkABAAOAJkAAwABBAkABQAWAKcAAwABBAkABgAOAL0AAwABBAkACgBYAMsAAwABBAkACwAkASMgZS1pY29uc1JlZ3VsYXJlLWljb25zZS1pY29uc1ZlcnNpb24gMS4wZS1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBpAGMAbwBuAHMAZQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQIBAwEEAAh0ZW1wLWN1cxJGQl9DaGVja2JveF9zZWxlY3QAAAA=) format('truetype'); + font-weight: normal; + font-style: normal; + } + + /* csslint ignore:end */ + + #ticks_slider .e-scale { + z-index: 0; + } + + #ticks_slider .e-scale .e-custom::before { + content: '\e967'; + position: absolute; + } + + #ticks_slider .e-scale :nth-child(1)::before { + color: red; + } + + #ticks_slider .e-scale :nth-child(2)::before { + color: blue; + } + + #ticks_slider .e-scale :nth-child(3)::before { + color: green; + } + + #ticks_slider .e-scale :nth-child(4)::before { + color: blueviolet; + } + + #ticks_slider .e-scale :nth-child(5)::before { + color: orange; + } + + #ticks_slider .e-scale :nth-child(6)::before { + color: pink; + } + + #ticks_slider .e-scale .e-custom::before { + font-size: 10px; + } + + #ticks_slider .e-scale .e-custom::before { + top: calc(50% + 1px); + left: calc(50% - 5px); + } + + #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before { + top: calc(50% + 1px); + left: calc(0% - 5px); + } + + #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before { + top: calc(50% + 1px); + left: calc(100% - 6px); + } + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/slider/numeric-value/tagHelper b/ej2-asp-core-mvc/code-snippet/slider/numeric-value/tagHelper index da0c67583a..241fd7bf60 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/numeric-value/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/slider/numeric-value/tagHelper @@ -1,14 +1,21 @@ - +
+
Slider formatted with unit representation
+ - +
+
+
Slider formatted with three decimal specifiers
- + +
+
Slider formatted with two leading zeros
+
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/slider/reversible-slider/tagHelper b/ej2-asp-core-mvc/code-snippet/slider/reversible-slider/tagHelper index 44615c8b2c..94a49da182 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/reversible-slider/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/slider/reversible-slider/tagHelper @@ -1,4 +1,17 @@ - - - - \ No newline at end of file +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/slider/tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/slider/tooltip/tagHelper index a73f70338a..c0a7113176 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/tooltip/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/slider/tooltip/tagHelper @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/slider/types/HomeController.cs b/ej2-asp-core-mvc/code-snippet/slider/types/HomeController.cs index 8c592b3150..31a98d179e 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/types/HomeController.cs +++ b/ej2-asp-core-mvc/code-snippet/slider/types/HomeController.cs @@ -1,4 +1,4 @@ -public IActionResult Index() +public IActionResult Types() { ViewBag.range = new int[] { 30, 70 }; return View(); diff --git a/ej2-asp-core-mvc/code-snippet/slider/types/tagHelper b/ej2-asp-core-mvc/code-snippet/slider/types/tagHelper index 3619c7543b..25bb277e5b 100644 --- a/ej2-asp-core-mvc/code-snippet/slider/types/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/slider/types/tagHelper @@ -1,3 +1,33 @@ - - - +
+
+ + +
+
+ + +
+
+ + +
+
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/range-slider/EJ2_ASP.MVC/ej1-api-migration.md b/ej2-asp-core-mvc/range-slider/EJ2_ASP.MVC/ej1-api-migration.md index cf2d60bbd5..dd066970bf 100644 --- a/ej2-asp-core-mvc/range-slider/EJ2_ASP.MVC/ej1-api-migration.md +++ b/ej2-asp-core-mvc/range-slider/EJ2_ASP.MVC/ej1-api-migration.md @@ -1,7 +1,7 @@ --- layout: post -title: Ej1 Api Migration in ##Platform_Name## Range Slider Component -description: Learn here all about Ej1 Api Migration in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Ej1 Api Migration in ##Platform_Name## Range Slider Control +description: Learn here all about Ej1 Api Migration in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ej1 Api Migration publishingplatform: ##Platform_Name## @@ -10,7 +10,7 @@ documentation: ug # Migration from Essential® JS 1 -This article describes the API migration process of Slider component from Essential® JS 1 to Essential® JS 2. +This article describes the API migration process of Slider control from Essential® JS 1 to Essential® JS 2. | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | diff --git a/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/ej1-api-migration.md b/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/ej1-api-migration.md index 0ac53c442e..a3493a0742 100644 --- a/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/ej1-api-migration.md +++ b/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/ej1-api-migration.md @@ -1,7 +1,7 @@ --- layout: post -title: Ej1 Api Migration in ##Platform_Name## Range Slider Component -description: Learn here all about Ej1 Api Migration in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Ej1 Api Migration in ##Platform_Name## Range Slider Control +description: Learn here all about Ej1 Api Migration in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ej1 Api Migration publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Migration from Essential® JS 1 -This article describes the API migration process of Slider component from Essential® JS 1 to Essential® JS 2. +This article describes the API migration process of Slider control from Essential® JS 1 to Essential® JS 2. | Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | diff --git a/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/getting-started.md index 27db0828ec..8cba2934f5 100644 --- a/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/range-slider/EJ2_ASP.NETCORE/getting-started.md @@ -38,7 +38,7 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. ## Add Syncfusion® ASP.NET Core Tag Helper -Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. +Open **~/Pages/_ViewImports.cshtml** file and import the `Syncfusion.EJ2` TagHelper. {% tabs %} {% highlight C# tabtitle="~/_ViewImports.cshtml" %} @@ -50,7 +50,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe ## Add stylesheet and script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -72,7 +72,7 @@ N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/ ## Register Syncfusion® Script Manager -Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -88,7 +88,7 @@ Also, register the script manager `` at the end of `` in the A ## Add ASP.NET Core RangeSlider control -Now, add the Syncfusion® ASP.NET Core RangeSlider tag helper in `~/Pages/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET Core RangeSlider tag helper in **~/Pages/Index.cshtml** page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/range-slider/accessibility.md b/ej2-asp-core-mvc/range-slider/accessibility.md index 6da8f87f39..e12281dc8c 100644 --- a/ej2-asp-core-mvc/range-slider/accessibility.md +++ b/ej2-asp-core-mvc/range-slider/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in ##Platform_Name## Range Slider Component -description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Accessibility in ##Platform_Name## Range Slider Control +description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Accessibility publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-bar.md b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-bar.md index c54260334e..6f577bf0af 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-bar.md +++ b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-bar.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize Slider Bar in ##Platform_Name## Range Slider Component -description: Learn here all about Customize Slider Bar in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Customize Slider Bar in ##Platform_Name## Range Slider Control +description: Learn here all about Customize Slider Bar in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Customize Slider Bar publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-limits.md b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-limits.md index 7d93b7eb96..51396c1955 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-limits.md +++ b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-limits.md @@ -1,7 +1,7 @@ --- layout: post title: Customize Slider Limits in ##Platform_Name## Range Slider Control | Syncfusion -description: Learn here all about Customize Slider Limits in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +description: Learn here all about Customize Slider Limits in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Customize Slider Limits publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-thumb.md b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-thumb.md index d83a500f0b..e47deeb57b 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-thumb.md +++ b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-thumb.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize Slider Thumb in ##Platform_Name## Range Slider Component -description: Learn here all about Customize Slider Thumb in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Customize Slider Thumb in ##Platform_Name## Range Slider Control +description: Learn here all about Customize Slider Thumb in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Customize Slider Thumb publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-ticks-label.md b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-ticks-label.md index 5a1bc1c364..98805f1597 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/customize-slider-ticks-label.md +++ b/ej2-asp-core-mvc/range-slider/how-to/customize-slider-ticks-label.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize Slider Ticks Label in ##Platform_Name## Range Slider Component -description: Learn here all about Customize Slider Ticks Label in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Customize Slider Ticks Label in ##Platform_Name## Range Slider Control +description: Learn here all about Customize Slider Ticks Label in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Customize Slider Ticks Label publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/date-range-slider.md b/ej2-asp-core-mvc/range-slider/how-to/date-range-slider.md index b95b34449d..a1260eae12 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/date-range-slider.md +++ b/ej2-asp-core-mvc/range-slider/how-to/date-range-slider.md @@ -1,7 +1,7 @@ --- layout: post -title: Date Range Slider in ##Platform_Name## Range Slider Component -description: Learn here all about Date Range Slider in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Date Range Slider in ##Platform_Name## Range Slider Control +description: Learn here all about Date Range Slider in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Date Range Slider publishingplatform: ##Platform_Name## @@ -10,7 +10,7 @@ documentation: ug # Date Range Slider -The Date formatting can be achieved in `ticks` and `tooltip` using `renderingTicks` and `tooltipChange` events respectively. The process of formatting is explained in the below sample. +The Date formatting can be achieved in [`ticks`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Ticks) and [`tooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Tooltip) using [`renderingTicks`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_RenderingTicks) and [`tooltipChange`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_TooltipChange) events respectively. The process of formatting is explained in the below sample. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/how-to/form-slider-with-form-validator.md b/ej2-asp-core-mvc/range-slider/how-to/form-slider-with-form-validator.md index 56914b4e7c..49e7c283c2 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/form-slider-with-form-validator.md +++ b/ej2-asp-core-mvc/range-slider/how-to/form-slider-with-form-validator.md @@ -1,7 +1,7 @@ --- layout: post title: Form Slider With Form Validator in ##Platform_Name## Range Slider Control | Syncfusion -description: Learn here all about Form Slider With Form Validator in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +description: Learn here all about Form Slider With Form Validator in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Form Slider With Form Validator publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/numeric-range-slider.md b/ej2-asp-core-mvc/range-slider/how-to/numeric-range-slider.md index 8035680449..ed68d7a949 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/numeric-range-slider.md +++ b/ej2-asp-core-mvc/range-slider/how-to/numeric-range-slider.md @@ -1,7 +1,7 @@ --- layout: post -title: Numeric Range Slider in ##Platform_Name## Range Slider Component -description: Learn here all about Numeric Range Slider in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Numeric Range Slider in ##Platform_Name## Range Slider Control +description: Learn here all about Numeric Range Slider in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Numeric Range Slider publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/how-to/reversible-slider.md b/ej2-asp-core-mvc/range-slider/how-to/reversible-slider.md index 8b79672440..279837ee50 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/reversible-slider.md +++ b/ej2-asp-core-mvc/range-slider/how-to/reversible-slider.md @@ -1,7 +1,7 @@ --- layout: post title: Reversible Range Slider in ##Platform_Name## -description: Learn here all about Reversible Range Slider in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +description: Learn here all about Reversible Range Slider in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Reversible Range Slider publishingplatform: ##Platform_Name## @@ -10,7 +10,7 @@ documentation: ug # Reversible Range Slider -You can create a Range Slider rendered with values in reverse order by setting the `min` property to the maximum value and the `max` property to the minimum value. An example of how to achieve a reversible Range Slider is shown below +You can create a Range Slider rendered with values in reverse order by setting the [`min`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Min) property to the maximum value and the [`max`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Max) property to the minimum value. An example of how to achieve a reversible Range Slider is shown below {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/how-to/show-slider-from-hidden-state.md b/ej2-asp-core-mvc/range-slider/how-to/show-slider-from-hidden-state.md index 065c22b0f2..8003958577 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/show-slider-from-hidden-state.md +++ b/ej2-asp-core-mvc/range-slider/how-to/show-slider-from-hidden-state.md @@ -1,7 +1,7 @@ --- layout: post -title: Show Slider From Hidden State in ##Platform_Name## Range Slider Component -description: Learn here all about Show Slider From Hidden State in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Show Slider From Hidden State in ##Platform_Name## Range Slider Control +description: Learn here all about Show Slider From Hidden State in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Show Slider From Hidden State publishingplatform: ##Platform_Name## @@ -10,7 +10,7 @@ documentation: ug # Show Slider from Hidden State -This section demonstrates how-to render the Slider component in hidden state and make it visible in button click. We can initialize Slider in hidden state by setting display as none to it. +This section demonstrates how-to render the Slider control in hidden state and make it visible in button click. We can initialize Slider in hidden state by setting display as none to it. In the sample, by clicking on the button, we can make the Slider visible from hidden state, and we must also call the `refresh` method of the Slider to render it properly based on its original dimensions. diff --git a/ej2-asp-core-mvc/range-slider/how-to/time-range-slider.md b/ej2-asp-core-mvc/range-slider/how-to/time-range-slider.md index b9b3af06ca..07ecebcec6 100644 --- a/ej2-asp-core-mvc/range-slider/how-to/time-range-slider.md +++ b/ej2-asp-core-mvc/range-slider/how-to/time-range-slider.md @@ -1,7 +1,7 @@ --- layout: post -title: Time Range Slider in ##Platform_Name## Range Slider Component -description: Learn here all about Time Range Slider in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Time Range Slider in ##Platform_Name## Range Slider Control +description: Learn here all about Time Range Slider in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Time Range Slider publishingplatform: ##Platform_Name## @@ -10,7 +10,7 @@ documentation: ug # Time Range Slider -The time formatting can be achieved same as the date formatting using `renderingTicks` and `change` events. The process of time formatting is explained in the below sample. +The time formatting can be achieved same as the date formatting using [`renderingTicks`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_RenderingTicks) and [`change`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Change) events. The process of time formatting is explained in the below sample. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/limits.md b/ej2-asp-core-mvc/range-slider/limits.md index 0e7def2ccb..0c4fa9930b 100644 --- a/ej2-asp-core-mvc/range-slider/limits.md +++ b/ej2-asp-core-mvc/range-slider/limits.md @@ -1,7 +1,7 @@ --- layout: post title: Limits in ##Platform_Name## Range Slider Control | Syncfusion -description: Learn here all about Limits in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +description: Learn here all about Limits in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Limits publishingplatform: ##Platform_Name## @@ -15,13 +15,13 @@ The slider limits restrict the slider thumb between a particular range. This is The following are the six options in the slider's limits object. Each API in the limits object is optional. -* ``enabled``: Enables the limits in the Slider. -* ``minStart``: Sets the minimum limit for the first handle. -* ``minEnd``: Sets the maximum limit for the first handle. -* ``maxStart``: Sets the minimum limit for the second handle. -* ``maxEnd``: Sets the maximum limit for the second handle. -* ``startHandleFixed``: Locks the first handle. -* ``endHandleFixed``: Locks the second handle. +* [``enabled``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_Enabled): Enables the limits in the Slider. +* [``minStart``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_MinStart): Sets the minimum limit for the first handle. +* [``minEnd``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_MinEnd): Sets the maximum limit for the first handle. +* [``maxStart``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_MaxStart): Sets the minimum limit for the second handle. +* [``maxEnd``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_MaxEnd): Sets the maximum limit for the second handle. +* [``startHandleFixed``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_StartHandleFixed): Locks the first handle. +* [``endHandleFixed``](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderLimitData.html#Syncfusion_EJ2_Inputs_SliderLimitData_EndHandleFixed): Locks the second handle. ## Default and MinRange Slider limits @@ -56,7 +56,7 @@ There is only one handle in the Default and MinRange Slider, so ``minStart``, `` ## Range Slider limits -In the range slider, both handles can be restricted and locked from the limit's object. In this sample, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90. +In the Range Slider, both handles can be restricted and locked from the limit's object. In this sample, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/orientation.md b/ej2-asp-core-mvc/range-slider/orientation.md index eb31557870..f49e4d4e44 100644 --- a/ej2-asp-core-mvc/range-slider/orientation.md +++ b/ej2-asp-core-mvc/range-slider/orientation.md @@ -1,7 +1,7 @@ --- layout: post -title: Orientation in ##Platform_Name## Range Slider Component -description: Learn here all about Orientation in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Orientation in ##Platform_Name## Range Slider Control +description: Learn here all about Orientation in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Orientation publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Orientation -The Slider can be displayed, either in horizontal or vertical orientation. By default, the Slider renders in horizontal orientation. +The Slider can be displayed, either in horizontal or vertical by using [`orientation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Orientation) property. By default, the Slider renders in horizontal orientation. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/overview.md b/ej2-asp-core-mvc/range-slider/overview.md index 2073860557..3a5333cb2c 100644 --- a/ej2-asp-core-mvc/range-slider/overview.md +++ b/ej2-asp-core-mvc/range-slider/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: Overview in ##Platform_Name## Range Slider Component -description: Learn here all about Overview in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Overview in ##Platform_Name## Range Slider Control +description: Learn here all about Overview in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Index publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/style.md b/ej2-asp-core-mvc/range-slider/style.md index 9c7a6ccac0..140dea9a8f 100644 --- a/ej2-asp-core-mvc/range-slider/style.md +++ b/ej2-asp-core-mvc/range-slider/style.md @@ -1,7 +1,7 @@ --- layout: post -title: Style in ##Platform_Name## Range Slider Component -description: Learn here all about Style in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Style in ##Platform_Name## Range Slider Control +description: Learn here all about Style in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style publishingplatform: ##Platform_Name## diff --git a/ej2-asp-core-mvc/range-slider/ticks.md b/ej2-asp-core-mvc/range-slider/ticks.md index 72c03a4b8e..85ec59fb11 100644 --- a/ej2-asp-core-mvc/range-slider/ticks.md +++ b/ej2-asp-core-mvc/range-slider/ticks.md @@ -1,7 +1,7 @@ --- layout: post -title: Ticks in ##Platform_Name## Range Slider Component -description: Learn here all about Ticks in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Ticks in ##Platform_Name## Range Slider Control +description: Learn here all about Ticks in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ticks publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Ticks -The Ticks in Slider supports you to easily identify the current value/values of the Slider. It contains `smallStep` and `largeStep`. The value of the major ticks alone will be displayed in the slider. In order to enable/disable the small ticks, use the `showSmallTicks` property. +The Ticks in Slider supports you to easily identify the current value/values of the Slider. It contains [`smallStep`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderTicksData.html#Syncfusion_EJ2_Inputs_SliderTicksData_SmallStep) and [`largeStep`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderTicksData.html#Syncfusion_EJ2_Inputs_SliderTicksData_LargeStep). The value of the major ticks alone will be displayed in the slider. In order to enable/disable the small ticks, use the [`showSmallTicks`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderTicksData.html#Syncfusion_EJ2_Inputs_SliderTicksData_ShowSmallTicks) property. {% if page.publishingplatform == "aspnet-core" %} @@ -42,7 +42,7 @@ The Ticks in Slider supports you to easily identify the current value/values of ## Step -When the Slider is moved, it increases/decreases the value based on the step value. By default, the value is increased/decreased by 1. Use the `step` property to change the increment step value. +When the Slider is moved, it increases/decreases the value based on the step value. By default, the value is increased/decreased by 1. Use the [`step`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Step) property to change the increment step value. {% if page.publishingplatform == "aspnet-core" %} @@ -73,7 +73,7 @@ When the Slider is moved, it increases/decreases the value based on the step val ## Min and Max -Enables the minimum/starting and maximum/ending value of the Slider, by using the `min` and `max` property. By default, the minimum value is 1 and maximum value is 100. In the following sample the slider is rendered with the min value as 100 and max value as 1000. +Enables the minimum/starting and maximum/ending value of the Slider, by using the [`min`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Min) and [`max`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_Max) property. By default, the minimum value is 1 and maximum value is 100. In the following sample the slider is rendered with the min value as 100 and max value as 1000. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/tooltip.md b/ej2-asp-core-mvc/range-slider/tooltip.md index 99f12a2db5..be801ca9e1 100644 --- a/ej2-asp-core-mvc/range-slider/tooltip.md +++ b/ej2-asp-core-mvc/range-slider/tooltip.md @@ -1,7 +1,7 @@ --- layout: post -title: Tooltip in ##Platform_Name## Range Slider Component -description: Learn here all about Tooltip in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +title: Tooltip in ##Platform_Name## Range Slider Control +description: Learn here all about Tooltip in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Tooltip publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Tooltip -The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the `placement` property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page. +The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the [`placement`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.SliderTooltipData.html#Syncfusion_EJ2_Inputs_SliderTooltipData_Placement) property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page. {% if page.publishingplatform == "aspnet-core" %} @@ -42,10 +42,9 @@ The Slider displays the tooltip to indicate the current value by clicking the Sl ## Buttons -The Slider value can be changed by using the Increase and Decrease buttons. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value. +The Slider value can be changed by using the Increase and Decrease buttons. The [`showButtons`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Slider.html#Syncfusion_EJ2_Inputs_Slider_ShowButtons) property is set to **true** to display these buttons. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value. -N> After enabling the slider buttons if the 'Tab' key is pressed, the focus goes to the handle -and not to the button. +N> After enabling the slider buttons if the 'Tab' key is pressed, the focus goes to the handle and not to the button. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/range-slider/types.md b/ej2-asp-core-mvc/range-slider/types.md index 5b7c02579d..95723299a3 100644 --- a/ej2-asp-core-mvc/range-slider/types.md +++ b/ej2-asp-core-mvc/range-slider/types.md @@ -1,7 +1,7 @@ --- layout: post title: Types in ##Platform_Name## Range Slider Control | Syncfusion -description: Learn here all about Types in Syncfusion ##Platform_Name## Range Slider component of Syncfusion Essential JS 2 and more. +description: Learn here all about Types in Syncfusion ##Platform_Name## Range Slider control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Types publishingplatform: ##Platform_Name##