V1.0. Added options to control UI.

Author: OOlashyn

RangeSliderControl/ControlManifest.Input.xml

@@ -1,20 +1,22 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="DancingWithCrmControls" constructor="RangeSliderControl" version="0.3.0" display-name-key="DancingWithCrm.RangeSliderControl" description-key="Range Slider Control from DancingWithCrm" control-type="standard">
+  <control namespace="DancingWithCrmControls" constructor="RangeSliderControl" version="1.0.0" display-name-key="DancingWithCrm.RangeSliderControl" description-key="Range Slider Control from DancingWithCrm" control-type="standard">
     <type-group name="numbers">
         <type>Whole.None</type>
         <type>Currency</type>
         <type>FP</type>
         <type>Decimal</type>
     </type-group>
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
-    <property name="MinValue" display-name-key="RangeSliderControl_MinValue" description-key="Minimal value of the slider" of-type-group="numbers" usage="input" required="true" />
-    <property name="MaxValue" display-name-key="RangeSliderControl_MaxValue" description-key="Maximum value of the slider" of-type-group="numbers" usage="input" required="true" />
-    <property name="StepValue" display-name-key="RangeSliderControl_StepValue" description-key="Step value of the slider" of-type-group="numbers" usage="input" required="false" />
-    <property name="HolderValue" display-name-key="RangeSliderControl_HolderValue" description-key="HolderValue" of-type-group="numbers" usage="bound" required="false" />
-    <property name="LowerValue" display-name-key="RangeSliderControl_LowerValue" description-key="Lower value of the slider that will be set" of-type-group="numbers" usage="bound" required="true" />
-    <property name="UpperValue" display-name-key="RangeSliderControl_UpperValue" description-key="Upper value of the slider" of-type-group="numbers" usage="bound" required="true" />
-    
+    <property name="MinValue" display-name-key="MinValue" description-key="Minimal value of the slider" of-type-group="numbers" usage="input" required="true" />
+    <property name="MaxValue" display-name-key="MaxValue" description-key="Maximum value of the slider" of-type-group="numbers" usage="input" required="true" />
+    <property name="StepValue" display-name-key="StepValue" description-key="Step value of the slider" of-type-group="numbers" usage="input" required="false" />
+    <property name="HolderValue" display-name-key="HolderValue" description-key="HolderValue" of-type-group="numbers" usage="bound" required="false" />
+    <property name="LowerValue" display-name-key="LowerValue" description-key="Lower value of the slider that will be set" of-type-group="numbers" usage="bound" required="true" />
+    <property name="UpperValue" display-name-key="UpperValue" description-key="Upper value of the slider" of-type-group="numbers" usage="bound" required="true" />
+    <property name="ShowScale" display-name-key="ShowScale" description-key="Set 1 to show scale (StepValue required)" of-type="Whole.None" usage="input" required="false" />
+    <property name="RequireStep" display-name-key="RequireStep" description-key="Set 1 to move only on step value (StepValue required)" of-type="Whole.None" usage="input" required="false" />
+
     <resources>
       <code path="index.ts" order="1"/>
       <css path="css/nouislider.min.css" order="1" />

RangeSliderControl/css/RangeSliderControl.css

@@ -1,6 +1,6 @@
 .dwcrm-slider-wrapper{
     margin-top:50px;
-    margin-bottom: 30px;
+    margin-bottom: 50px;
     padding-left: 10px;
     padding-right: 40px;
 }

RangeSliderControl/index.ts

@@ -39,10 +39,13 @@ export class RangeSliderControl implements ComponentFramework.StandardControl<II
 
 		this._minValue = context.parameters.MinValue.raw || 0;
 		this._maxValue = context.parameters.MaxValue.raw || 100;
-		this._stepValue = context.parameters.StepValue.raw;
+		this._stepValue = context.parameters.StepValue.raw || 10;
 		this._upperValue = context.parameters.UpperValue.raw;
 		this._lowerValue = context.parameters.LowerValue.raw;
 
+		let showScale = !!context.parameters.ShowScale.raw;
+		let requireStep = !!context.parameters.RequireStep.raw;
+
 		this._slider = document.createElement("div");
 		this._slider.id = "slider";
 
@@ -56,18 +59,45 @@ export class RangeSliderControl implements ComponentFramework.StandardControl<II
 		let startLower:number = this._lowerValue || this._minValue;
 		let startUpper:number = this._upperValue || this._maxValue;
 
-		noUiSlider.create(this._slider, {
+		let sliderOptions = this.getSliderOptions(this._minValue, this._maxValue,
+			startLower, startUpper, this._stepValue, showScale, requireStep);
+
+		noUiSlider.create(this._slider, sliderOptions);
+
+		// @ts-ignore
+		this._slider.noUiSlider.on('change', this.refreshData);
+	}
+
+	private getSliderOptions(min:number,max:number, startLower:number, startUpper:number, 
+		step:number, showScale:boolean, requireStep:boolean): noUiSlider.Options{
+
+		let options:noUiSlider.Options = {
 			start: [startLower, startUpper],
-			connect: true,
 			range: {
-				'min': this._minValue,
-				'max': this._maxValue
+				'min': min,
+				'max': max
 			},
-			tooltips: true,
-		});
+			connect: true,
+			tooltips: true
+		};
+
+		if(showScale && step){
+			options.pips = {
+				mode: 'steps',
+        		values: [0, 50, 100],
+				density: 2,
+				stepped: true
+			};
+		}
 
-		// @ts-ignore
-		this._slider.noUiSlider.on('change', this.refreshData);
+		if(requireStep){
+			options.range = {
+				'min': [min, step],
+				'max': max
+			}
+		}
+
+		return options;
 	}
 
 	public refreshData(values:string[], handle:number):void{