<div class="row">
<div class="span9">
<div class="span7" id="{{attrs.id}}_slider"></div>
<div class="span1" id="{{attrs.id}}_label">{{attrs.value}} {{attrs.units}}</div>

<script>
  $(function() {
    $('#{{attrs.id}}_slider').slider(
        {
            range: true,
            values: {{attrs.values}},
            min: {{attrs.min}},
            max: {{attrs.max}}
        }
        );
        var scores = $("#{{attrs.id}}_slider").slider("values");
        $("input[name={{attrs.name}}]").val(scores);
        $("#{{attrs.id}}_label").html(scores[0]+" to "+scores[1] + "{{attrs.units}}");

      $( "#{{attrs.id}}_slider" ).on(
          "slidechange", function( event, ui ) {
                var scores = $("#{{attrs.id}}_slider").slider("values");
                $("input[name={{attrs.name}}]").val(scores);
                $("#{{attrs.id}}_label").html(scores[0]+" to "+scores[1] + "{{attrs.units}}") }
        );


});
</script>


<input type=hidden value="" name="{{attrs.name}}">
</div>
</div>
