How to use the @storybook/addon-knobs.number function in @storybook/addon-knobs

step: 0.01,
    });
    const orientationY = number("orientation - y", 0, {
      range: true,
      min: 0,
      max: 1,
      step: 0.01,
    });
    const orientationZ = number("orientation - z", 0, {
      range: true,
      min: 0,
      max: 1,
      step: 0.01,
    });

    const posX = number("target - x", 0, {
      range: true,
      min: 0,
      max: 20,
      step: 0.1,
    });
    const posY = number("target - y", 0, {
      range: true,
      min: 0,
      max: 20,
      step: 0.1,
    });
    const posZ = number("target - z", 0, {
      range: true,
      min: 0,
      max: 20,
      step: 0.1,

.add("Slide Field", () => (
    
      <div style="{{">
        
      </div>
    
  ))
  .add("Switch Field", () =&gt; (

.add('with interval', () => (
		
	))
	.add('with stepValue', () => (

function createThemeAction(title: string, min: number, max: number, value: number) {
  return number(
    title,
    value,
    {
      range: true,
      min,
      max,
      step: 1,
    },
    'theme',
  );
}

.add('Proportional', () => {
        const containerHeight = number('Container Height', 500)
        const leftHeight = number('Left Content Height', 1000)
        const rightHeight = number('Right Content Height', 2000)
        const containerStyle = `height:${containerHeight}px;width:100px;`
        const topColor = color('Top Color', '#ff0000')
        const centerColor = color('Center Color', '#00ff00')
        const bottomColor = color('Bottom Color', '#0000ff')
        const bg = `linear-gradient(${topColor}, ${centerColor}, ${bottomColor})`
        return ({
            components: { ScrollSync },
            template: `
            <div style="display:flex;">
                
                    <div style="width:100px;height:${leftHeight}px;background:${bg};">
                
                
                    <div style="width:100px;height:${rightHeight}px;background:${bg};"></div></div></div>

.add('Title', () => (
    
          
          {text('(prop) title', 'Show how YOU wear it')}
        
      }
      subtitle={text('(prop) subtitle', '#YOURLOOK')}
    />
  ))
  .add('SubTitle', () => (

.add("Load Four Applications", () => {
    resetStore();

    const oneAppName = text("application1Name", "kalm-bookinfo1", "Application1");
    const twoAppName = text("application1Name", "kalm-bookinfo2", "Application2");
    const threeAppName = text("application1Name", "kalm-bookinfo3", "Application3");
    const fourAppName = text("application1Name", "kalm-bookinfo4", "Application4");

    const oneAppCreateTime = date("create Date", new Date("2020-06-17"), "Application1");
    const twoAppCreateTime = date("create Date", new Date("2020-06-18"), "Application2");
    const threeAppCreateTime = date("create Date", new Date("2020-06-19"), "Application3");
    const fourAppCreateTime = date("create Date", new Date("2020-06-11"), "Application4");

    const oneComponentCounter = number("pod counter", 2, undefined, "Application1");
    const twoComponentCounter = number("pod counter", 3, undefined, "Application2");
    const threeComponentCounter = number("pod counter", 4, undefined, "Application3");
    const fourComponentCounter = number("pod counter", 5, undefined, "Application4");

    const onePodCounter = number("pod counter", 2, undefined, "Application1");
    const twoPodCounter = number("pod counter", 3, undefined, "Application2");
    const threePodCounter = number("pod counter", 4, undefined, "Application3");
    const fourPodCounter = number("pod counter", 5, undefined, "Application4");

    createRoutes(store, [oneAppName, twoAppName, threeAppName, fourAppName]);

    let oneApp: ApplicationDetails = createApplication(oneAppName);
    const oneAppComponent = createApplicationComponent(
      oneAppName,
      oneComponentCounter,
      oneAppCreateTime,
      generateRandomIntList(onePodCounter, 0, 5),
    );

() => {
      const containerWidth = number('container width', 1056);
      return (
        <>
          <div style="{{">
            
              
                <a href="/#">Breadcrumb 1</a>
              
              Breadcrumb 2
              Breadcrumb 3
              Breadcrumb 4
              Breadcrumb 5
              Breadcrumb 6
            
          </div>

margin={
            ComponentSize[
              select(
                'margin',
                {None: '', ...mapEnumKeys(ComponentSize)},
                'Small'
              )
            ]
          }
          stretchToFitWidth={true}
        >
          
            <div>A</div>
          
          
            <div>B</div>

export const withMinimumAndMaximumLimits = () => {
	const label = text( 'Label', 'How many columns should this use?' );
	const min = number( 'Min Value', 2 );
	const max = number( 'Max Value', 10 );

	return (
		
	);
};