2 questions regarding range slider

Home Forums Quform WordPress 2 questions regarding range slider

This topic is: resolved
  • This topic has 3 replies, 2 voices, and was last updated 7 years ago by katw.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25505
    blackbeard
    Participant

    Hi,

    I’ve been trying to use the ranger slider based on your documentation, but:

    1) I can’t manage to remove decimals… Currently all my values are shown as xx.xx but I want it shown as simply xx.
    2) What is the best way to add a suffix? I need my values to show “months”.

    Thanks!

    • This topic was modified 7 years ago by blackbeard.
    #25508
    katw
    Participant

    Hi, thought I may be able to help.

    1] The slider has many configuration options (docs here).

    To remove decimal points add the format parameter to the CREATE function you previously loaded to CUSTOM JS.

     .....  (look for:)
    
             if (slider) {
                noUiSlider.create(slider, {
                    start: [20, 80],
                    connect: true,
                    step: 1,
                    tooltips: true,
                   // ADD THIS 
                    format: wNumb({
                        decimals: 0
                        }),
                   // END ADD
                    range: {
                        'min': 0,
                        'max': 100
                    }
                });
    ........

    2] Did you want the suffix displaying on screen to user or just wanted the suffix saved to the hidden field?

    One way is to use the suffix parameter available in the slider.

    This requires a slight adjustment to the code you were inserting above. Replace the three lines we added in Question 1 with the four lines below:

    format: wNumb({
    		decimals: 0,
    		suffix: ' months',
    	}),
    • This reply was modified 7 years ago by katw. Reason: Added suffix parameter code
    #25520
    blackbeard
    Participant

    That worked great, thanks! 🙂 At first I thought something’s wrong, but then I realized I need to add additional noUiSlider URL link to my functions.php.

    Have a great day katw!

    #25529
    katw
    Participant

    @blackbeard Congrats!

    Also I spotted a trailing comma in my second code that shouldn’t be there.

    format: wNumb({
    		decimals: 0,
    		suffix: ' months' (remove comma here)
    	}),
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy