Range option for number type of addon-ondevice-controls not working

[msachi]

Describe the bug Setting the range option to true has no effect on the (appearance or functionality) of the control

To Reproduce Steps to reproduce the behavior:

1. Set the argTypes to { control: { type: 'number', range: true, min: 15, max: 30, step: 2 } }
2. Observe no effect compared to if range is false

Expected behavior Would expect to have a slider rendered, but instead only see the standard textbox (as if range is false).

Screenshots

Code snippets

import React from 'react';
import { View } from 'react-native';

import Checkbox from './Checkbox';
import { colors } from '../../config/styles';

export default {
  title: 'Checkbox',
  component: Checkbox,
  args: {
    label: 'Check me',
    value: true,
    checkboxSize: 20,
  },
  argTypes: {
    value: {
      control: {
        type: 'boolean',
      },
    },
    checkboxSize: { control: { type: 'number', range: true, min: 15, max: 30, step: 2 } },
  },
  decorators: [
    (Story) => (
      <View
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          flex: 1,
          paddingHorizontal: 20,
          backgroundColor: colors.green,
        }}
      >
        <Story />
      </View>
    ),
  ],
};

export const Default = {};

System: System: OS: macOS 12.6.8 CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz Binaries: Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm Browsers: Chrome: 116.0.5845.96 Safari: 16.6 npmPackages: @storybook/addon-actions: ^6.5.16 => 6.5.16 @storybook/addon-controls: ^6.5.16 => 6.5.16 @storybook/addon-ondevice-actions: ^6.5.6 => 6.5.6 @storybook/addon-ondevice-backgrounds: ^6.5.6 => 6.5.6 @storybook/addon-ondevice-controls: ^6.5.6 => 6.5.6 @storybook/addons: ^7.3.0 => 7.3.0 @storybook/react-native: ^6.5.6 => 6.5.6

[dannyhw]

Actually it is possible to use range it just works differently. Needs to be updated to match web still.

https://github.com/storybookjs/react-native/blob/next/examples/expo-example/components/ControlExamples/Number/Number.stories.tsx

[msachi]

Thanks @dannyhw , changed my code to checkboxSize: { range: true, min: 15, max: 30, step: 2 } and it shows a functional slider 🚀