Multi-range snippet issue

Topic: Multi-range snippet issue

Ahmed Kaja premium asked 4 years ago

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&amp;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>

Add comment

Krzysztof Wilk staff answered 4 years ago

0 0 Best answer

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

Add comment

Ahmed Kaja premium answered 4 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
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

Ahmed Kaja

Premium support

15Support score
1Questions 1Answers

0Snippets likes 1Snippets