<form method="post" action="" class="wide form-horizontal" role="form">
        <input type='hidden' name='csrfmiddlewaretoken' value='5bEpa2lkmW2qiOnPZtEkHQIkyKYRbVL6' />
        <div class="form-group">
                <label class="checkbox-inline">
                    <label for="id_lists_5">
                        <input id="id_lists_5" name="lists" type="checkbox"
                               checked
                               value="5" /> Champions</label>
                </label>
                <label class="checkbox-inline">
                    <label for="id_lists_6">
                        <input id="id_lists_6" name="lists" type="checkbox"
                               checked
                               value="6" /> Contenders</label>
                </label>
                <label class="checkbox-inline">
                    <label for="id_lists_7">
                        <input id="id_lists_7" name="lists" type="checkbox"
                               checked
                               value="7" /> Challengers</label>
                </label>
            <div class="row">
                <div class="col-sm-2"></div>
                <div class="col-sm-2"><h4>Active</h4></div>
                <div class="col-sm-4" align="center"><h3>Filter</h3></div>
                <div class="col-sm-4" align="center"><h3>Influence</h3></div>
            </div>
            <div class="row">
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">Dividend Yield:</div>
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <input class="form-control" id="dividend-yield-enabled" name="dividend-yield-enabled"
                           data-size="mini" data-toggle="toggle" data-on="Enabled" data-off="Disabled"
                           type="checkbox" data-onstyle="default"
                            checked/>
                </div>
                <div class="col-sm-4" style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider form-control" name="dividend-yield" id="dividend-yield" type="text"
                           data-slider-min="0"
                           data-slider-max="20" data-slider-step="0.5"
                           data-slider-value="[0.000, 5.000]"
                           data-slider-enabled="true" />
                <b style="margin-left: 10px;">20%</b>
                </div>
                <div class="col-sm-4" style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
    <input class="slider" id="dividend-yield-influence" name="dividend-yield-influence"
        data-slider-id='dividend-yield-influence' type="text"
         data-slider-value="5"
        data-slider-min="1" data-slider-max="5" data-slider-step="1"
        data-slider-enabled="true"/>
                    <b style="margin-left: 10px;">5</b>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">Payout Ratio:</div>
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <input id="payout-ratio-enabled" data-size="mini" data-toggle="toggle" data-on="Enabled"
                           data-off="Disabled" type="checkbox" data-onstyle="default"
                           checked>
                </div>
                <div class="col-sm-4" style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider span2" id="payout-ratio" name="payout-ratio" type="text" value=""
                           data-slider-min="0"
                           data-slider-max="300" data-slider-step="1"
                           data-slider-value="[0, 60]"
                           />
                <b style="margin-left: 10px;">300%</b>
                </div>
                <div class="col-sm-4" style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider" id="payout-ratio-influence" name="payout-ratio-influence"
                           data-slider-id='payout-ratio-influence' type="text"
                           data-slider-min="0" data-slider-max="5" data-slider-step="1"
                           data-slider-value="3"
                           data-slider-enabled="true"/>
                <b style="margin-left: 10px;">5</b>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <span data-toggle="tooltip" data-placement="top" title="3 years Dividend growth rate">DGR3:</span></div>
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <input id="dgr3-enabled"  data-size="mini" data-toggle="toggle" data-on="Enabled"
                           data-off="Disabled" type="checkbox" data-onstyle="default"
                    checked>
                </div>
                <div class="col-sm-4" style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider" id="dgr3" name="dgr3" type="text" class="span2" value=""
                           data-slider-min="0"
                           data-slider-max="100" data-slider-step="1"
                           data-slider-value="[0, 20]"
                           data-slider-enabled="true"/>
                <b style="margin-left: 10px;">100%</b>
                </div>
                <div class="col-sm-4"  style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider" id="dgr3-influence" name="dgr3-influence" data-slider-id='dgr3-influence' type="text"
                           data-slider-min="0" data-slider-max="5"
                           data-slider-step="1"
                           data-slider-value="1"
                           data-slider-enabled="true"/>
                    <b style="margin-left: 10px;">5</b>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <span  data-toggle="tooltip" data-placement="top" title="5 years Dividend growth rate">DGR5:</span></div>
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <input id="dgr5-enabled" data-size="mini" data-toggle="toggle" data-on="Enabled"
                           data-off="Disabled" type="checkbox" data-onstyle="default"
                    checked>
                </div>
                <div class="col-sm-4"  style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider" id="dgr5" name="dgr5" type="text" class="span2" value="" data-slider-min="0"
                           data-slider-max="100" data-slider-step="1"
                           data-slider-value="[0, 20]"
                           data-slider-enabled="true"/>
                <b style="margin-left: 10px;">100%</b>
                </div>
                <div class="col-sm-4"  style="margin-top:10px; padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider" class="slider" id="dgr5-influence" name="dgr5-influence"
                           data-slider-id='dgr5-influence' type="text"
                           data-slider-min="0" data-slider-max="5"
                           data-slider-step="1"
                           data-slider-value="1"
                           data-slider-enabled="true"/>
                    <b style="margin-left: 10px;">5</b>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2" style="padding-top:10px;"><span data-toggle="tooltip" data-placement="top"
                     title="Stock is penalized based on sector allocation" >Sector:</span></div>
                <div class="col-sm-2" style="margin-top:10px; padding-top:10px;">
                    <input id="category-enabled"  data-size="mini" data-toggle="toggle" data-on="Enabled"
                           data-off="Disabled" type="checkbox" data-onstyle="default"
                           checked>
                </div>
                <div class="col-sm-4">
                </div>
                <div class="col-sm-4" style="padding-top:10px;">
                <b style="margin-right: 10px;">0</b>
                    <input class="slider" id="category-influence" name="category-influence" data-slider-id='category-influence'
                           type="text" data-slider-min="0" data-slider-max="5"
                           data-slider-step="1"
                           data-slider-value="1"
                           data-slider-enabled="true"/>
                    <b style="margin-left: 10px;">5</b>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Save Filter</button>
    </form>