Loading
string value range slider using jquery  
  •   
  •   
  •   
  •   
  • var steps = [    
  •     "very sad",    
  •     "sad",    
  •     "not so sad",    
  •     "happy",    
  •     "very happy"    
  •     ];    
  •     
  •     $(function() {    
  •         $("#price_range3").slider({    
  •             value: 1,    
  •             min: 0,    
  •             max: 4,    
  •             step: 1,    
  •             slide: function(event, ui) {    
  •                 $("#price_show3").val(steps[ui.value]);    
  •             }    
  •         });    
  •         $("#price_show3").val(steps[$("#price_range3").slider("value")]);    
  •     });    
  •       
    • i use it but not working
  • Elavarasan R

    Elavarasan RPosted Aug 9, 2019, 4:37 AM

    Hello vyas,
    I think below example will help you.
     
    1. var p = {  
    2.                        0: "how much???",  
    3.                        25: "a bit steep",  
    4.                        50: "a good deal",  
    5.                        75: "a bargain",  
    6.                        100: "a steal!"  
    7.                     };  
    8.                        
    9.                        
    10.         $("#slider-p").slider({  
    11.             value:50,  
    12.             min: 0,  
    13.             max: 100,  
    14.             step: 25,  
    15.             slide: function(event, ui) {  
    16.                 $("#price").val(p[ui.value]);  
    17.             }  
    18.              
    19.         });  
    20.          
    21.       $("#price").val(p[$("#slider-p").slider("value")]);  
    22.     }); 
     
    Refrences:
    https://www.tutorialspoint.com/jqueryui/jqueryui_slider
    https://coreui.io/docs/components/sliders/
  • Rajanikant Hawaldar

    Rajanikant HawaldarPosted Aug 9, 2019, 4:28 AM

    Hi Dear,
     
    Refer this sample example
     
    https://forum.jquery.com/topic/string-value-in-a-jquery-slider 
     
    You can put your step labels in an array, then use the slider's value as an index into that array
    1. var steps = [  
    2.     "very sad",  
    3.     "sad",  
    4.     "not so sad",  
    5.     "happy",  
    6.     "very happy"  
    7. ];  
    8.   
    9. $(function() {  
    10.     $("#slider").slider({  
    11.         value: 1,  
    12.         min: 0,  
    13.         max: 4,  
    14.         step: 1,  
    15.         slide: function(event, ui) {  
    16.             $("#amount").val(steps[ui.value]);  
    17.         }  
    18.     });  
    19.     $("#amount").val(steps[$("#slider").slider("value")]);  
    20. });