feat: Slider add children to thumb

I am not super happy with how this works as the child is inside the thumb div. Ideally it should be moving around the thumb, but then that might be a tooltip lib?

packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import Layout from '../../../layout';
 import Utils from '../../../nodes/controls/utils';
-import { Noodl } from '../../../types';
+import { Noodl, Slot } from '../../../types';
 
 export interface SliderProps extends Noodl.ReactProps {
   _nodeId: string;
@@ -24,6 +24,8 @@ export interface SliderProps extends Noodl.ReactProps {
 
   onClick: () => void;
   updateOutputValue: (value: number) => void;
+
+  children: Slot;
 }
 
 function _styleTemplate(_class: string, props: SliderProps) {
@@ -168,7 +170,9 @@ export function Slider(props: SliderProps) {
   return (
     <div style={divStyle}>
       <div style={trackStyle} />
-      <div style={thumbStyle} />
+      <div style={thumbStyle}>
+        {props.children}
+      </div>
       <input
         className={className}
         {...Utils.controlEvents(props)}

packages/noodl-viewer-react/src/nodes/controls/slider.ts

@@ -11,7 +11,6 @@ const RangeNode = {
   name: 'net.noodl.controls.range',
   displayNodeName: 'Slider',
   docs: 'https://docs.noodl.net/nodes/ui-controls/slider',
-  allowChildren: false,
   noodlNodeAsProp: true,
   connectionPanel: {
     groupPriority: [