How to display value in slider in ruby on rails

Question

Hi folks I am having issues in jquery slider in ruby on rails. if anyone knows the answer please help me. Actually my code for jquery slider is

                  <div id="report">
                        <div class="slide">
                    <%= range_field_tag(:maturity_level_score, assess.attributes["maturity_level_score"], in: 1..10 , name: 'maturity_score[]')%>
                  </div>
                  </div>

am using range_field_tag for sliders. so it provided me sliders like without the range value

but I want to show the range values(which I mentioned in the code) over the slider.

Is there any possible to add to display range values in my slider?? Is there any code to add in my range_field_tag??...please reply anyone if you have suggestions. Thanks in advance. any help would be so grateful to me.

Answer 1

Take a look at this answer - https://stackoverflow.com/a/26739955/3556317

You can apply the same jQuery and change the CSS according to your styling needs. The range_field_tag will convert into an HTML <input type="range"/> so the code will work. You will just have to add the classes to the field.

Here is the code for what you want.

1. HTML

   <div class="range-wrapper">
     <input type="range" min="0" max="10" id="myRange"/>
     <div class="text">1</div>
   </div>
   <div class="range-wrapper">
     <input type="range" min="0" max="10" id="mySecondRange"/>
     <div class="text">1</div>
   </div>
   

2. jQuery

   $(document).ready(function(){
     updateRangeValue($('input[type=range]'));
     $('input[type=range]').on('input change',function(){
       var input = $(this);
       updateRangeValue(input);
     });    
   });
   function updateRangeValue(input){
     var value = input.val();
     var maximum = input.attr('max'); 
     var inputWidth = input.width();
     var offLeft = Math.floor((value / maximum) * inputWidth - (((value / maximum) * inputWidth - inputWidth/2) / 100) * 24);    
     var offLeftAbs = value == maximum ? input.offset().left - 15 + offLeft : input.offset().left - 10 + offLeft;
     input.next('.text').css({'left': offLeftAbs +'px'});
     input.next('.text').html(value);
   }
   

3. CSS

   .range-wrapper {
     overflow: hidden;
     padding: 5px 0px;    
   } 
   .range-wrapper > div {
     position: relative;
     top: -15px;
     width: 5px;
   }
   .range-wrapper > .text {
     pointer-events: none;
   }
   input[type=range]{
     -webkit-appearance: none;
     background: #eee;
   }
   input[type=range]::-webkit-slider-runnable-track {
     width: 300px;
     height: 5px;   
     border: none;
     border-radius: 3px;
   }
   input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: 1px solid #e95e57;
     height: 32px;
     width: 32px;
     border-radius: 50%;
     background: white;
     margin-top: -14px;
     cursor: pointer;
   }
   input[type=range]:focus {
     outline: none;
     background: #ccc;
   }
   

Here is the jsFiddle link.

Hope this helps.