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>
This commit is contained in:
Srisuma Atluri 2022-11-17 18:18:44 +05:30 committed by GitHub
parent a7ca80e932
commit 8824c00896
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions

View file

@ -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={{

View file

@ -4122,7 +4122,9 @@ export const widgets = [
},
},
},
events: {},
events: {
onChange: { displayName: 'On change' },
},
styles: {
lineColor: {
type: 'color',