{"version":"1.0","type":"rich","title":"Input Range with react","description":"This example demonstrates a React component that combines a range slider and a dropdown menu to control a numeric value. It shows how React state manages the selected value, which is displayed as text. The code uses React's `useState` hook to store the input value and passes it back to the `RangeInput` component via props. The `RangeInput` component renders an HTML `<input type=\"range\">` element, while the `Dropdown` component renders a `<select>` element, both triggering state updates through `onSelectedValueChange`. ReactDOM renders the main `App` component to the root element.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/85ab6e142676460fa5c1b3a7e3c224d6?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}