javascript - react-rangeslider don't show on bootstrap modal -

i'm trying put slider on bootstrap modal doesn't seems working me: i'm having slider's default values printed on screen. screenshot

the slidebar component nested inside of modal component. modal component:

import react 'react'; import {modal, button} 'react-bootstrap'; import horizontal './horizontal-slider'; import reactdom 'react-dom'; export default class locationmodal extends react.component{     constructor(props){         super(props);         this.state={cordinates: props.cordinates, showmodal:props.showmodal}         this.togglemodal = this.togglemodal.bind(this);     }      togglemodal(){         this.setstate({showmodal:! this.state.showmodal});     }      getinitialstate() {         return { showmodal: false };     }     componentwillreceiveprops(nextprops) {         this.setstate({ cordinates: nextprops.cordinates, showmodal:nextprops.showmodal });     }      render(){         var coorstring =this.state.cordinates[1]+","+this.state.cordinates[0];         var link = "https://maps.googleapis.com/maps/api/staticmap?center="+             coorstring+             "&size=800x800&zoom=17&markers=color:red%7clabel:c%7c" +             coorstring;              return(                 <modal show={this.state.showmodal} onhide={this.togglemodal} bssize="large">                     <modal.header closebutton>                         <modal.title id="modal-header" classname="text-center">                             google maps                         </modal.title>                     </modal.header>                     <modal.body>                         <horizontal />                         <img src={link} classname="img-responsive" width="100%"/>                     </modal.body>                     <modal.footer>                         <button onclick={()=>{this.togglemodal()}}>fermer</button>                     </modal.footer>                 </modal>             );     } } 

slider componenet:

import react, { component } 'react' import slider 'react-rangeslider' export default class horizontal extends component {     constructor (props, context) {         super(props, context)         this.state = {             value: 0         }     }      handlechange = (value) => {         this.setstate({             value: value         })     }      handlechangecomplete = (e) => {         console.log('change event completed')     }      render () {         const { value } = this.state         return (             <div classname='slider'>                 <slider                     min={0}                     max={100}                     value={value}                     onchange={this.handlechange}                     onchangecomplete={this.handlechangecomplete}                 />                 <div classname='value'>{value}</div>             </div>         )     } } 

i had import css file in slider's class.

import 'react-rangeslider/lib/index.css';