slider component

player/react/src/lib/components/index.ts

@@ -17,6 +17,7 @@ import * as progressIndicator from './ui-progress-indicator';
 import * as row from './ui-row';
 import * as tag from './ui-tag';
 import * as searchinput from './ui-search-input';
+import * as slider from './ui-slider';
 import * as text from './ui-text';
 import * as textarea from './ui-text-area';
 import * as textinput from './ui-text-input';
@@ -55,6 +56,7 @@ export const allComponents = {
 	progressIndicator,
 	row,
 	searchinput,
+	slider,
 	tag,
 	text,
 	textarea,

player/react/src/lib/components/ui-slider.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Slider } from '@carbon/react';
+import { CssClasses, SendSignal } from '../types';
+import { commonSlots, slotsDisabled } from '../common-slots';
+
+export interface SliderState {
+	type: string;
+	id: string;
+	labelText: string;
+	min: number;
+	max: number;
+	value: number;
+	cssClasses?: CssClasses[];
+	disabled?: boolean;
+	step?: number;
+	textInputHidden?: boolean;
+	light?: boolean;
+	stepMultiplier?: number;
+	minLabel?: string;
+	maxLabel?: string;
+	codeContext?: {
+		name: string;
+	};
+}
+
+export const type = 'slider';
+
+export const slots = {
+	...slotsDisabled,
+	...commonSlots,
+	textInputHidden: 'boolean',
+	hideTextInput: (state: SliderState) => ({
+		...state,
+		textInputHidden: true
+	}),
+	showTextInput: (state: SliderState) => ({
+		...state,
+		textInputHidden: false
+	}),
+	toggleTextInputVisibility: (state: SliderState) => ({
+		...state,
+		textInputHidden: !state.textInputHidden
+	}),
+	labelText: 'string',
+	min: 'number',
+	max: 'number',
+	value: 'number',
+	step: 'number',
+	stepMultiplier: 'number',
+	minLabel: 'string',
+	maxLabel: 'string'
+};
+
+export const signals = ['valueChange', 'click'];
+
+export const UISlider = ({ state, sendSignal }: {
+	state: SliderState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+	if (state.type !== 'slider') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	return <Slider
+		id={state.id}
+		labelText={state.labelText}
+		min={state.min}
+		max={state.max}
+		value={state.value}
+		disabled={state.disabled}
+		step={state.step}
+		hideTextInput={state.textInputHidden}
+		stepMultiplier={state.stepMultiplier}
+		minLabel={state.minLabel}
+		maxLabel={state.maxLabel}
+		light={state.light}
+		onClick={() => sendSignal(state.id, 'click')}
+		onChange={({ value }: any) => {
+			sendSignal(state.id, 'valueChange', [value], { ...state, value });
+		}}
+		className={state.cssClasses?.map((cc: any) => cc.id).join(' ')} />;
+};

player/react/src/lib/utils.tsx

@@ -27,6 +27,7 @@ import { UIRow } from './components/ui-row';
 import { UISelectableTile } from './components/ui-selectable-tile';
 import { UISelectableTileGroup } from './components/ui-selectable-tile-group';
 import { UISearchInput } from './components/ui-search-input';
+import { UISlider } from './components/ui-slider';
 import { UITag } from './components/ui-tag';
 import { UIText } from './components/ui-text';
 import { UITextAreaInput } from './components/ui-text-area';
@@ -271,6 +272,9 @@ export const renderComponents = (
 		case 'search':
 			return <UISearchInput key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'slider':
+			return <UISlider key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'tag':
 			return <UITag key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;