Topic: Multi-range snippet issue
Please see snippet - https://mdbootstrap.com/snippets/jquery/ahmed_kaja/2311522
While the multi-range slider looks vertical on the snippet page, when I download it and open the page on my browser, it's not vertical anymore. I didn't change any code after downloading the snippet.
index.html page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="multi-range-field my-5 pb-5">
<input id="multi2" class="multi-range" type="range">
</form>
<!-- Start your project here-->
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript"></script>
<script type="text/javascript">
$('#multi2').mdbRange({
width: '30%',
direction: 'horizontal',
single: {
active: true,
multi: {
active: true,
rangeLength: 1
},
}
});
</script>
</body>
</html>
Ohh, so when I download snippets from your sites, they don't download and have the css/js of plugins downloaded and added to the page?
Krzysztof Wilk staff commented 4 years ago
In our editor, all of the plugins are attached, so everything works. But in a package, you have to attach additional CSS / JS plugin files on your own.
Hi!
You forgot to import CSS and JS files for this addon. Proper code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<link rel="stylesheet" href="css/addons-pro/multi-range.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Start your project here-->
<form class="multi-range-field my-5 pb-5">
<input id="multi2" class="multi-range" type="range">
</form>
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/addons-pro/multi-range.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript">
$('#multi2').mdbRange({
width: '30%',
direction: 'horizontal',
single: {
active: true,
multi: {
active: true,
rangeLength: 1
},
}
});
</script>
</body>
</html>
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: Mac
- Browser: Chrome 84.0.*
- OS: MacOS Catalina 10.15.3
- Provided sample code: No
- Provided link: Yes