this.setState({value:points[0]})}\r\n labelStep={10}\r\n onLabelClick={(value)=>{\r\n this.setState({value})\r\n }}\r\n /> \r\n );\r\n }\r\n}\r\n```\r\n\r\n\r\n\r\n--------------------------------------------------\r\n- ## awesome slider configuration1\r\n```javascript\r\n \r\n{\r\n return {\r\n background:'#666',\r\n padding:'0 12px',\r\n height:24,\r\n borderRadius:40,\r\n boxShadow:'inset 0 1px 4px 0px'\r\n }\r\n }}\r\n pointStyle={()=>{\r\n return {\r\n width:40,\r\n height:40,\r\n background:'#aaa',\r\n border:'3px solid #666',\r\n boxShadow:'4px 4px 8px 0px rgba(0,0,0,.5)'\r\n }\r\n }}\r\n labelStyle={()=>{\r\n return {top:63,color:'#666'}\r\n }} \r\n scaleStyle={()=>{\r\n return {\r\n width:6,\r\n height:6,\r\n top:48,\r\n background:'#666',\r\n borderRadius:'100%',\r\n transform:'translateX(-3px)'\r\n }\r\n }}\r\n lineStyle={()=>{\r\n return {background:'#777'}\r\n }}\r\n showValue={true}\r\n valueStyle={()=>{\r\n return {\r\n background:'none',\r\n top:-8,\r\n color:'#666'\r\n }\r\n }}\r\n/>\r\n
\r\n```\r\ncss\r\n```javascript\r\nbody{\r\n background:#ccc;\r\n}\r\n.slider-container{\r\n background: linear-gradient(to bottom, #454545 0%, #ddd 100%);\r\n padding:10px;\r\n box-sizing:border-box;\r\n border-radius:40px; \r\n}\r\n```\r\n\r\n--------------------------------------------------\r\n- ## awesome slider configuration2\r\n```javascript\r\n \r\n{\r\n return {\r\n width:30,\r\n height:30,\r\n border:'3px solid #888',\r\n background:'#ddd'\r\n }\r\n }}\r\n scaleStep={1}\r\n scaleStyle={()=>{\r\n return {\r\n width:30,\r\n height:30,\r\n borderRadius:'100%',\r\n top:3,\r\n transform:'translateX(-15px)',\r\n background:'#888',\r\n zIndex:10,\r\n }\r\n }}\r\n lineStyle{()=>{\r\n return {\r\n background:'#888'\r\n }\r\n }}\r\n showValue={true}\r\n valueStyle={()=>{\r\n return {\r\n background:'none',\r\n color:'#888',\r\n top:-11,\r\n fontSize:16\r\n }\r\n }}\r\n/>\r\n
\r\n```\r\n\r\n\r\n--------------------------------------------------\r\n- ## awesome slider configuration3\r\n```javascript\r\nclass App extends Component {\r\n state = {value:true};\r\n render() {\r\n let {value} = this.state;\r\n return (\r\n \r\n {\r\n this.setState({value:!value})\r\n }\r\n }}\r\n getText={(index)=>{\r\n return index === 0?'ON':'OFF';\r\n }}\r\n textStyle={(index)=>{\r\n if(index === 0){\r\n return {\r\n color:'#fff',\r\n transform:'translateX(-10px)'\r\n\r\n }\r\n }\r\n else if(index === 1){\r\n return {\r\n color:'#fff',\r\n transform:'translateX(10px)'\r\n\r\n }\r\n }\r\n }}\r\n pointStyle={()=>{\r\n return {\r\n width:36,\r\n height:36,\r\n background:'#444'\r\n }\r\n }}\r\n lineStyle={()=>{\r\n return {display:'none'}\r\n }}\r\n /> \r\n \r\n
\r\n );\r\n }\r\n}\r\n```\r\n\r\n\r\n","readmeFilename":"README.md"}