Range Input - allow decimal places / labels

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Range Input - allow decimal places / labels

InfoShow pro asked 7 years ago 


Hi!

I'm trying to use the Range Input (slider) and was wondering if the following is possible:

    
 	
  1. Allow decimal places (I have a slider where I need to allow 0.1 steps from 0-2)
    2. 
 	
  2. Similar to how the Premium Select list needed some modification to allow a label, could I have a label for the Range input? Currently looks like this: https://prnt.sc/ggeln0
    3. 


Thanks very much,

Tim.                                                                    

                                                                
                                

                                                                                                                                                    
                                        

                                                                                            
                                                                                    

                                                                    

                                
                            

                                                                                

                        
                                                                                                                    
                                

                                    
                                    

                                        

                                                    
                                                    Mirosław Stasiak
                                                                                        answered 7 years ago                                        

                                        
                                    

                                    
                                    

                                        Hi,

Here you have a solution. You will need to style label to make it look the way you want, and was in the right place.

<form class="range-field">
 <label for="range-slider">Slider label</label>
 <input id="range-slider" type="range" min="0" max="2" step="0.1"/>
</form>

Regards,                                                                                    

                                                                                
                                        

                                                                                                                                                                                                                                    

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                                        
                            

                                
                                

                                    

                                        
                                        
                                        
                                        
                                    

                                

                                
                                
                                

                                    
Write

                                    
                                         Create snippet
                                    
                                

                                
                                

                                    

                                        
                                        

                                            
                                            
                                            
                                            

                                                Please insert min. 20 characters.                                            

                                            

                                                                                                    
                                                                                            

                                        

                                    

                                

                                
                            

                            
                                            

                    
                    
                    

                                           
                 
                  
                      
                     

                      

                       
FREE CONSULTATION

                       
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


                      

                    

                      
                  
                    
                    

                    

                        

                          
                          
                          
                          
                          
                         

                        

                      

                    
                       


                                                 

                        
                        

                            
                            
Status

                            
                            

                                

                                            Answered                                        

                                                            

                        

                        
                                                
                        

                            
                            
Specification of the issue

                                            
        

            
    
                
  • 
                    User:
                    Pro
                
    • 
                
  • 
                    Premium support:
                    No
                
    • 
                
  • 
                    Technology:
                    MDB jQuery
                
    • 
                                    
  • 
                        MDB Version:
                        -
                    
    • 
                                    
  • 
                        Device:
                        -
                    
    • 
                                    
  • 
                        Browser:
                        -
                    
    • 
                                    
  • 
                        OS:
                        -
                    
    • 
                                
  • 
                    Provided sample code:
                    Yes
                
    • 
                
  • 
                    Provided link:
                    No
                
    • 
                
            

        

                                

                        
                                                                                                                            
                            

                                
                                
About author

                                                                    
                

                            
                        

                


                    
                    

                        InfoShow
                    

                    
                    
                    

                    
                    
                                            Pro User
                                                            
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    0Support score
                    

                    1Questions
                    0Answers
                    

                    
                    

                    0Snippets likes
                    0Snippets