FM / controls

/home/techb158/balacoffee.com/wp-content/themes/Divi/common/stories/controls/

/home/techb158/balacoffee.com/wp-content/themes/Divi/common/stories/controls

Name	Size	Mode	Actions
input/	-	0755	rm
ripple/	-	0755	rm
button-group.stories.js	1658	0644	edit dl rm
button.stories.js	1224	0644	edit dl rm
categories.stories.js	1546	0644	edit dl rm
codemirror.stories.js	1585	0644	edit dl rm
color.stories.js	1707	0644	edit dl rm
range.stories.js	1259	0644	edit dl rm
select-advanced.stories.js	3814	0644	edit dl rm
select-menu.stories.js	3079	0644	edit dl rm
tags.stories.js	1842	0644	edit dl rm
toggle.stories.js	872	0644	edit dl rm

Edit: /home/techb158/balacoffee.com/wp-content/themes/Divi/common/stories/controls/range.stories.js (1259B)

import React from 'react';
import ETCoreRange from '../../controls/range/range';

export default {
  title: 'Controls/ETCoreRange',
  component: ETCoreRange,
  render: (args) => {
    const { range_min: min, range_max: max, range_step: step } = args;
    return (
      <ETCoreRange
        {...args}
        value={min}
        _onChange={(e) => {
          console.log(e);
        }}
        range_settings={{
          min,
          max,
          step,
        }}
      />
    );
  },
  argTypes: {
    range_settings: {
      control: false,
    },
    range_min: {
      control: {
        type: 'number',
      },
    },
    range_max: {
      control: {
        type: 'number',
      },
    },
    range_step: {
      control: {
        type: 'number',
      },
    },
  },
};

export const Default = {
  args: {
    name: 'default-range',
    range_min: 0,
    range_max: 100,
    range_step: 1,
  },
};

export const WithCustomUnit = {
  args: {
    ...Default.args,
    name: 'custom-unit-range',
    default_unit: '%',
  },
};

export const WithCustomRange = {
  args: {
    ...Default.args,
    name: 'custom-range',
  },
};

export const WithPrecision = {
  args: {
    ...Default.args,
    name: 'precision-range',
    precision: 2,
  },
};

import React from 'react'; import ETCoreRange from '../../controls/range/range'; export default { title: 'Controls/ETCoreRange', component: ETCoreRange, render: (args) => { const { range_min: min, range_max: max, range_step: step } = args; return ( { console.log(e); }} range_settings={{ min, max, step, }} /> ); }, argTypes: { range_settings: { control: false, }, range_min: { control: { type: 'number', }, }, range_max: { control: { type: 'number', }, }, range_step: { control: { type: 'number', }, }, }, }; export const Default = { args: { name: 'default-range', range_min: 0, range_max: 100, range_step: 1, }, }; export const WithCustomUnit = { args: { ...Default.args, name: 'custom-unit-range', default_unit: '%', }, }; export const WithCustomRange = { args: { ...Default.args, name: 'custom-range', }, }; export const WithPrecision = { args: { ...Default.args, name: 'precision-range', precision: 2, }, };