From 8824c00896cf7c8510e10dfc26dcd8bce137c19b Mon Sep 17 00:00:00 2001
From: Srisuma Atluri <40341173+Srisuma13@users.noreply.github.com>
Date: Thu, 17 Nov 2022 18:18:44 +0530
Subject: [PATCH] Enhancement : [RangeSlider widget] Bind onChange event
 (#4192)

* add onChange event and its handler

* add handler for slider change as well

* fix lint

* added onChange fire event when slider value is changed

Co-authored-by: manishkushare <kushare.manish9@gmail.com>
---
 frontend/src/Editor/Components/RangeSlider.jsx    | 4 +++-
 frontend/src/Editor/WidgetManager/widgetConfig.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/Components/RangeSlider.jsx b/frontend/src/Editor/Components/RangeSlider.jsx
index 2fda690f18..4587cb6aaf 100644
--- a/frontend/src/Editor/Components/RangeSlider.jsx
+++ b/frontend/src/Editor/Components/RangeSlider.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import Slider, { Range } from 'rc-slider';
 import 'rc-slider/assets/index.css';
 
-export const RangeSlider = function RangeSlider({ height, properties, styles, setExposedVariable }) {
+export const RangeSlider = function RangeSlider({ height, properties, styles, setExposedVariable, fireEvent }) {
   const { value, min, max, enableTwoHandle } = properties;
   const { trackColor, handleColor, lineColor, visibility } = styles;
   const sliderRef = useRef(null);
@@ -69,6 +69,7 @@ export const RangeSlider = function RangeSlider({ height, properties, styles, se
           max={max}
           defaultValue={toArray(rangeValue)}
           onChange={onRangeChange}
+          onAfterChange={() => fireEvent('onChange')}
           value={toArray(rangeValue)}
           ref={sliderRef}
           trackStyle={rangeStyles.trackStyle}
@@ -83,6 +84,7 @@ export const RangeSlider = function RangeSlider({ height, properties, styles, se
           value={sliderValue}
           ref={sliderRef}
           onChange={onSliderChange}
+          onAfterChange={() => fireEvent('onChange')}
           trackStyle={{ backgroundColor: trackColor }}
           railStyle={{ backgroundColor: lineColor }}
           handleStyle={{
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index a07132e8a0..62028a53bf 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -4122,7 +4122,9 @@ export const widgets = [
         },
       },
     },
-    events: {},
+    events: {
+      onChange: { displayName: 'On change' },
+    },
     styles: {
       lineColor: {
         type: 'color',