Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

NouiSlider for React


Hi

Do you have a working example of the NouiSlider for React?
In the demo1 code I don't see it

something like this:
https://preview.keenthemes.com/metronic/demo1/crud/forms/widgets/nouislider.html

but for ReactJS

thank you!


user
Jayanth K 3 years ago
Metronic React
5 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

user
five 7 months ago

This game is a great way to relax because of the funny animations and crazy fights. It's great for both short and long gaming sessions. foodle


user
Byan Milan 10 months ago

You can use react-nouislider for that, it’s a React wrapper of noUiSlider and works very similarly to the vanilla demo.


user
Rachel Cepheus 1 year ago

We take care of the slider's chosen range with the useState hook drive mad 2. The range, starting numbers, and an update handler are set in the settings of the ReactSlider component.


G
Guest 1 year ago
Deleted comment
user
Carmelo D 3 years ago

Hi

We don't have a NouiSlider example for the React version for now.
We will try to add examples in new releases, it will be based on

Regards,
Keenthemes support


user
George K 2 years ago

is there any sliders like this for your react edition...pretty sad that React missed out on a lot of the love the HTML version has.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(