diff --git a/models/survey_survey.py b/models/survey_survey.py
index 05616a16d4b2f1093bfdd0377637ba1f59ab76f0..ea888f2d4a2cfeda05b912e8e4d3746fc0dc33d9 100644
--- a/models/survey_survey.py
+++ b/models/survey_survey.py
@@ -50,6 +50,8 @@ class SurveyQuestion(models.Model):
     page_sequence = fields.Integer('Séquence de la page associée', related='page_id.sequence', store=True)
     criteria = fields.Char("Critère")
     num_question = fields.Char("Numéro de question")
+    min_value = fields.Integer("Valeur min.")
+    max_value = fields.Integer("Valeur max.")
 
 
 class SurveyLabel(models.Model):
diff --git a/static/src/css/ethikis_survey.css b/static/src/css/ethikis_survey.css
index b740d0f5ec1f343e930e4be41ef134e96ed67238..8b3c80db779810a5d15b8d1dc09d329120d7500b 100644
--- a/static/src/css/ethikis_survey.css
+++ b/static/src/css/ethikis_survey.css
@@ -176,3 +176,77 @@
     background-color: #e15360;
     border-color: #e15360;
 }
+
+input[type=range] {
+  -webkit-appearance: none;
+  margin: 20px 0;
+  width: 100%;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: #61C4E1;
+  border-radius: 25px;
+}
+input[type=range]::-webkit-slider-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -8px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background:  #61C4E1;
+}
+.range-wrap{
+  position: relative;
+}
+.range-value{
+  position: absolute;
+  top: -70%;
+}
+.range-value span{
+  width: 40px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: #61C4E1;
+  color: #fff;
+  font-size: 12px;
+  display: block;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  border-radius: 6px;
+}
+.range-value span:before{
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 10px solid #61C4E1;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  margin-top: -1px;
+}
+
+.form-control:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 0.2rem rgba(0, 160, 157, 0);
+}
+
+.form-control {
+    background-color: transparent !important;
+    border: 0px solid #ced4da !important;
+}
diff --git a/templates/layout.xml b/templates/layout.xml
index a774069deab5a972f43960218c8dbd73f3b6443c..72d3ec4d9d4ce247e3ba194aca80f39813db1038 100644
--- a/templates/layout.xml
+++ b/templates/layout.xml
@@ -236,9 +236,36 @@
         </template>
 
         <template id="numerical_box" inherit_id="survey.numerical_box">
-<!--            <input type="number" step="any" class="form-control" t-att-name="prefix"/>-->
             <xpath expr="//input" position="replace">
-                <input type="range" min="1" max="100" class="form-control slider" t-att-name="prefix"/>
+                <div class="row align-items-center text-center">
+                    <div class="col-1">
+                        <span t-field="question.min_value"/>
+                    </div>
+                    <div class="col-10">
+                        <div class="range-wrap">
+                            <div class="range-value" id="rangeV"></div>
+                            <input id="range" type="range" t-att-min="question.min_value" t-att-max="question.max_value" class="form-control slider" t-att-name="prefix"/>
+                        </div>
+                    </div>
+                    <div class="col-1">
+                        <span t-field="question.max_value"/>
+                    </div>
+                </div>
+                <script>
+                const
+                  range = document.getElementById('range'),
+                  rangeV = document.getElementById('rangeV'),
+                  setValue = ()=>{
+                    const
+                      newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
+                      newPosition = 10 - (newValue * 0.2);
+                    rangeV.innerHTML = `<span>${range.value}</span>`;
+                    rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
+                  };
+                document.addEventListener("DOMContentLoaded", setValue);
+                range.addEventListener('input', setValue);
+
+                </script>
             </xpath>
         </template>
 
diff --git a/views/survey_views.xml b/views/survey_views.xml
index f2961f56c84e885da44ab10544537349094ee51e..ed31ea8dc7309f58f92740aa5afd57dd51f53368 100644
--- a/views/survey_views.xml
+++ b/views/survey_views.xml
@@ -13,6 +13,10 @@
                     <field name="criteria"/>
                     <field name="num_question"/>
                 </field>
+                <xpath expr="//notebook//page//group//group//field[@name='constr_mandatory']" position="before">
+                    <field name="min_value" attrs="{'invisible': [('type', '!=', 'numerical_box')]}"/>
+                    <field name="max_value"  attrs="{'invisible': [('type', '!=', 'numerical_box')]}"/>
+                </xpath>
                 <xpath expr="//notebook//page//field[@name='labels_ids_2']//tree//field[@name='value']" position="after">
                     <field name="criteria"/>
                     <field name="num_question"/>