mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-06 06:48:21 +00:00
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:
parent
a7ca80e932
commit
8824c00896
2 changed files with 6 additions and 2 deletions
|
|
@ -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={{
|
||||
|
|
|
|||
|
|
@ -4122,7 +4122,9 @@ export const widgets = [
|
|||
},
|
||||
},
|
||||
},
|
||||
events: {},
|
||||
events: {
|
||||
onChange: { displayName: 'On change' },
|
||||
},
|
||||
styles: {
|
||||
lineColor: {
|
||||
type: 'color',
|
||||
|
|
|
|||
Loading…
Reference in a new issue