HTML
            


            
PUG
            
.slider
  .row
    .col-md-9
      .form-group
        .indicator-value
          span 0 €
          span 100 €
        input.slide#slide(type='range' name='volume' min='0' max='100' value='30' list="tickmarks")
    .col-md-3.result
      .form-group.field-item
        input(type="number")/
        .suffix €
.slider.step-value
  .form-group
    .datalist#tickmarks1
      .option(value='0' label='0 €') 0 €
      .option(value='10' label='10 €') 10 €
      .option(value='20' label='20 €') 20 €
      .option(value='30' label='30 €') 30 €
      .option(value='40' label='40 €') 40 €
      .option(value='50' label='50 €') 50 €
      .option(value='60' label='60 €') 60 €
      .option(value='70' label='70 €') 70 €
      .option(value='80' label='80 €') 80 €
      .option(value='90' label='90 €') 90 €
      .option(value='100' label='100 €') 100 €
    input.slide#slide1(type='range' name='volume' min='0' max='100' value='0' list="tickmarks1" step='10')
.slider.conseil
  .row
    .col-md-9
      .form-group
        input.slide#slide(type='range' name='volume' min='30000' max='5000000' value='4400000' list="tickmarks3")
        .indicator-value
          span 20 €/jour* 
            br/
            span soit 1000 €/an
          span 500 €/jour
            br/
            span soit 12000 €/an
          p.form-legend *Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        .bloc-conseil(style='left:calc(88% - 15px)')
          .titre Conseil Maif
    .col-md-3.result
      .form-group
        .field-item
          input(type="number")/
          div
            .suffix €/trimestre
            .sub soit €/an
.slider.conseil
  .row
    .col-md-9
      .form-group
        input.slide#slide(type='range' name='volume' min='0' max='100' value='35' list="tickmarks3")
        .bloc-conseil(style='left:calc(88% - 15px)')
          .titre 35 %