JSFiddle - React, Tailwind, and code Playground
by mark47
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://rawgithub.com/seiyria/bootstrap-slider/master/js/bootstrap-slider.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/seiyria/bootstrap-slider/master/css/bootstrap-slider.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body>
<div class="container">
<div class="row">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div class="panel panel-default panel-info">
<div class="panel-heading">
<h4 class="text-center">
Slider width issues -- current code
</h4>
</div>
<div class="panel-body">
<div class="well well-sm">
<p>Plain input at 100%</p>
<input style="width: 100%;" />
</div>
<div class="well well-sm">
<p>Slider input at 100% ?</p>
<input class="slider1" style="width: 100%;" />
</div>
<div class="well well-sm">
<p>Slider input no width</p>
<input class="slider2"/>
</div>
<div class="well well-sm">
<p>Slider input 100px width</p>
<input class="slider3" style="width: 100px;" />
</div>
...