{% trans_default_domain 'admin' %}

{% set fomattedValue = form.vars.value|replace({',': '.'}) %} 
<div class="input-wrapper" style="display:flex; align-items: center;"> 
  <input type="text" class="form-control text-center" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" 
         value="{{ fomattedValue }}" readonly style="width: 50px"/>
  
  <input type='range' value="{{ fomattedValue }}" class="range form-control gogo-marker-size" 
         min="0.5" max="1.5" step="0.1"/>
  
  <button type="button" class="btn btn-default btn-reset">
   {{ 'commons.use_default'|trans }}
  </button>
</div>

<script>
  $(document).ready(function() {
    var $input = $("#{{ form.vars.id }}")
    var $container = $("#{{ form.vars.id }}").closest('.input-wrapper')
    var $range = $container.find('.range')

    $range.on('input', function() {
      $input.val($(this).val())
    })
    
    $container.find('.btn-reset').click(function() {
      $input.val('')
      $range.attr('disabled', !$range.is(':disabled')).val(1)
    })
    
  })
</script>