Troubleshooting issue with Bootstrap slider: CSS display problem

After downloading the Bootstrap slider from this link: https://github.com/seiyria/bootstrap-slider, I navigated to \bootstrap-slider-master\dist and transferred the bootstrap-slider.js and bootstrap-slider.min.js files to my js folder. Additionally, I moved the bootstrap-slider.css and bootstrap-slider.min.css files to my css folder.

I decided to test out example 7 by visiting the examples page, but encountered an issue.

Here's the code snippet:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Test bootstrap slider </title>

        <link href="css/bootstrap.min.css" rel="stylesheet" >
        <link href="css/bootstrap-slider.min.css" rel="stylesheet">

    </head>
    <body>

        <div class="container">
            <input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
            <input id="ex7-enabled" type="checkbox"/> Enabled
        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="js/bootstrap-slider.min.js"></script>
        <script>
            $("#ex7").slider();

        </script>
    </body>
</html>

View the outcome here: My result in browser (click). Although the text and radio button appear, the slider itself is not visible. I suspect the css may be causing the issue, but I have included it in the head section after the bootstrap css. Thus, I'm unsure why it's not functioning as expected.

Answer №1

It seems like your code should be working fine, but it's possible that you may have mistakenly referenced the wrong file. I embedded the online versions of bootstrap and jquery, so everything should be functioning correctly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Title</title>

    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.1/css/bootstrap-slider.min.css">


    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.1/bootstrap-slider.js"></script>

</head>
<body>

    <div class="container">
        <input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
        <input id="ex7-enabled" type="checkbox"/> Enabled
    </div>
    <script>
        $("#ex7").slider();

    </script>
</body>
</html>

Answer №2

You made an error here:

<script type="js/bootstrap-slider.min.js"></script>
. It should be using "src" instead of "type". The correct code is:

<script src="js/bootstrap-slider.min.js"></script>

Give it a try!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to prevent actions while waiting for ajax in each specific method?

Within my JS component, I have various methods that handle events like click events and trigger ajax requests. To prevent the scenario where multiple clicks on the same button result in several ajax requests being fired off simultaneously, I typically use ...

I'm wondering how I can design a utility function within my Redux module that can extract a specific subset of read-only data from the current state

I am currently utilizing redux to create a "helper function" inside my redux module that is responsible for fetching filtered data from the state based on a specified index. This specific data will be used to generate a form consisting of inputs depending ...

Creating a callback function within stored procedures using JavaScript Language Integrated Query in documentDB: A step-by-step guide

According to the documentation, the code snippets below are considered equivalent. However, I have observed that in the first case, I am able to perform operations on multiple documents within the callback function, whereas the map function in the latter s ...

I prefer the user not engage with the background when the jQuery dialog is displayed

When a user clicks on an external link, the jQuery UI dialog box will appear with "ok" and "cancel" buttons. Upon clicking "ok," the user should be directed to the external site. Although everything is functioning correctly, there is an issue with the mod ...

Issues arise when attempting to implement PHP loops within an AJAX call to generate dynamic content

Lately, I've been working on injecting some dynamism into one of my websites. It's predominantly php-based, and I wanted to explore the option of dynamically changing pages using ajax. However, I encountered a hurdle when it came to integrating p ...

What is the best way to connect my products on an ecommerce site with hundreds of images?

Despite thoroughly searching the internet, I have been unable to find a solution to my dilemma. I am creating a platform that showcases a lengthy list of products on the website. Additionally, I have a database of pictures stored locally that need to be ...

What is the reason behind the decision for Google Chart API to display a legend only for pie charts

I have encountered an issue while attempting to display a pie chart on an ASP.NET webpage using the provided URL: . Despite passing valid values in the URL parameters, only the legend of the chart is displayed and not the chart itself. Can anyone provide i ...

Tips for speeding up your website by preloading versioned files in HTML

Tools like Google Lighthouse and PageSpeed recommend preloading important requests using <link rel=preload> to enhance website performance. When it comes to static files with unchanging filenames, the process is straightforward. However, how can I ...

Should we avoid using 'RedirectToAction' with AJAX POST requests in ASP.NET?

As a newcomer to jQuery, Json, and Ajax, I am putting in the effort to grasp the concepts clearly, but I am facing some difficulties. I have an ajax POST Delete method that is currently functional, however, my professor has suggested that I refactor the c ...

Leveraging the capabilities of the phonegap framework alongside node.js, javascript, html, mysql, and css

Could someone demonstrate how to utilize phonegap and node.js to interact with a mySQL database by pushing and pulling data from an HTML page or form? THANKS EDIT var connection = mysql.createConnection({ host : 'localhost', user : 'root& ...

I need to locate a div element with the class name of "dhx_cal_light" and adjust its height style to 460px

Is there a way to locate a div element with the class "dhx_cal_light" and modify its height to 460px? Here is the HTML snippet: <div class="dhx_cal_light" style="visibility: visible; height: 511px; display: block; top: 80px; left: 633px;"> This is ...

Utilizing jQuery to target a select element's two specific children

I am trying to target the parent element by matching two specific children elements. Here is my code: $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)"); <script src="https://c ...

Performing a JQuery ajax request resets the values of all form fields

For years, I have been creating contact forms for my websites that include captcha verification. You can view an example here: contact form In the past, if a user wanted to reload the captcha image, the only option was to refresh the entire form. Howeve ...

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference. After conducting thorough research, I attempted to ...

Generate a flexible JSON array in VB.NET

Looking to generate a flexible array that can be converted into a JSON array for visualization with Morris charts. The usual approach in VB.NET is as follows: Dim xArray(2) xArray(0) = New With {Key .TradingDay = "Day1", .Seller1 = 1500, .Seller2 = 160 ...

When utilizing the getIntersectionList function, IE 9 may experience a malfunction and cease functioning

I am currently working with SVG code and JavaScript, trying to achieve a specific intersection result. <svg id="svgSurface" width="500" height="500"> <defs> <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="0" markerUnits ...

Two indispensable tools for web development - Internet Explorer and ajaxStart/ajaxStop

Whenever I trigger a jQuery request, I aim to showcase a loading gif by utilizing ajaxStart(). Once the process is done, the gif should vanish using ajaxStop(). $( document ).ajaxStart( function () { $('#info').show(); }).ajaxStop( function () ...

Design a layout featuring an array of boxes in varied sizes

Is it possible to create a grid layout with 3 columns containing div boxes of varying heights, all populated with content extracted from a database? ...

Is it possible to use require() to read a .json file from a dependent library?

Is it possible to access a .json file within one of my dependent libraries? I'm hesitant to use fs to read ./node_modules/somelib/properties.json because the library could have been installed globally. Is there a way to achieve this using require in ...

Make an axios request multiple times equal to the number of items in the previous response

In my project, I am using the axios library to convert addresses into their respective coordinates. First, I fetch a list of addresses from an API. Next, I take the RESPONSE object and use Google API to convert each address to coordinates. Finally, I wan ...