1 import React
from 'react';
2 import { storiesOf
, action
} from '@kadira/storybook';
3 import SqInputRangeSlider
from '../../framework/widgets/sq-input-range-slider/sq-input-range-slider'
4 import StyleGuideItem
from 'react-style-guide';
5 import '../../node_modules/react-style-guide/node_modules/highlight.js/styles/github.css';
11 storiesOf('SqInputRangeSlider', module
)
12 .add('Horizontal Slider', () => (
14 <div className
="inputcontainer" style
={containerStyle
}>
15 <SqInputRangeSlider className
="one two three" max
={150} step
={10} width
={300} onChange
={action('valueChanged')} />
17 <div className
="inputcontainer" style
={containerStyle
}>
18 <SqInputRangeSlider className
="one two three" max
={150} step
={10} width
={800} onChange
={action('valueChanged')} />
20 <div className
="inputcontainer" style
={containerStyle
}>
21 <SqInputRangeSlider className
="one two three" max
={150} step
={10} width
={200} disabled onChange
={action('valueChanged')} />
25 .add('Vertical Slider', () => (
27 <div style
={{display
:'flex'}}>
28 <div style
={containerStyle
}>
29 <SqInputRangeSlider vertical
={true} width
={300} onChange
={action('valueChanged')} />
31 <div style
={containerStyle
}>
32 <SqInputRangeSlider vertical
={true} width
={600} onChange
={action('valueChanged')} />
34 <div style
={containerStyle
}>
35 <SqInputRangeSlider vertical
={true} width
={300} onChange
={action('valueChanged')} disabled
={true} />
36 <SqInputRangeSlider vertical
={true} width
={300} onChange
={action('valueChanged')} disabled
={true} />