I'm trying to create a basic slider with nouislider in an ASP.NET website (that's what we use, for better or worse). We're currently using the JQuery UI slider and it doesn't support touch events.
Whatever I try I get an 'Uncaught ReferenceError: noUiSlider is not defined at TestNoUISlider:39:17' error at the 'noUiSlider.create' line.
Web page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestNoUISlider.aspx.cs" Inherits="TestNoUISlider" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/noUiSlider/jquery.nouislider.css" rel="stylesheet" />
<script src="Scripts/jquery-3.6.0.min.js"></script>
<script src="Scripts/jquery.nouislider.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<h1>Test the no ui slider</h1>
<div>
<br />
<br />
<br />
</div>
<div id="slider"></div>
</div>
</div>
</form>
<script>
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
</script>
</body>
</html>
There are no code behind at all. The above is taken straight from the (nuislider website)
Any positive suggestions much appreciated.
The name
jquery.nouislider.jssuggests using are using an older version of noUiSlider, which was a jQuery plugin. It no longer is, and the code you are using from the documentation reflects that. Try downloading the latest version of noUiSlider. You won't need jQuery to use it.