Slider

Developer
Adam Lowenthal
Size
48,147 Kb
Views
28,336
  1. Slider Previews
  2. Slider HTML Codes
  3. Slider CSS Codes
  4. Slider JS Codes

How do I make an slider?

What is a slider? How do you make a slider? This script and codes were developed by Adam Lowenthal on 12 October 2022, Wednesday.

Slider Previews
IQ Test

Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css'>
<link rel='stylesheet prefetch' href='css/zggxyg.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <!-- "Within 'x' miles of location" --> <div class="slider"> <div class="slider__label"> <span class="slider--distance__label"> This is a distance of <span class="slider--label__value" id="slider--distance__value">7487.80</span> from the capital. </span> <span class="slider--distance__variable"> All distances </span> </div> <div id="slider--distance"></div> </div> <!-- / --> <!-- "Profile updated within 'x' days" --> <div class="slider"> <div class="slider__label"> <span class="slider--updatedWithin__label"> This is a distance of <span class="slider--label__value" id="slider--updatedWithin__value">7487.80</span> from the capital. </span> <span class="slider--updatedWithin__variable"> All Profiles </span> </div> <div id="slider--updatedWithin"></div> </div> <!-- / -->
</div>
<!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slider - Script Codes CSS Codes

.container{ width: 60em; margin: 60px auto 0 auto;
}
.slider{ margin: 60px 0;
}
.slider--label__value{ color: red;
}

Slider - Script Codes JS Codes

/* ===== Distance Slider ===== */
var sliderMin = 0;
var sliderMax = 50;
var sliderMid = sliderMax / 2;
var rangeSlider = document.getElementById('slider--distance');
noUiSlider.create(rangeSlider, { start: sliderMid, range: { 'min': sliderMin, 'max': sliderMax }
});
//Value
var rangeSliderValueElement = document.getElementById('slider--distance__value');
rangeSlider.noUiSlider.on('update', function(values, handle) { if(values[handle] < sliderMax){ rangeSliderValueElement.innerHTML = values[handle]; $('.slider--distance__variable').hide(); $('.slider--label').show(); } else{ $('.slider--label').hide(); $('.slider--distance__variable').show(); }
});
/* ===== / Distance Slider ===== */
/* ===== Profile Updated Within Slider ===== */
var sliderMin = 0;
var sliderMax = 180;
var sliderMid = sliderMax / 2;
var rangeSlider = document.getElementById('slider--updatedWithin');
noUiSlider.create(rangeSlider, { start: sliderMid, range: { 'min': sliderMin, 'max': sliderMax }
});
//Value
var rangeSliderValueElement = document.getElementById('slider--updatedWithin__value');
rangeSlider.noUiSlider.on('update', function(values, handle) { if(values[handle] < sliderMax){ rangeSliderValueElement.innerHTML = values[handle]; $('.slider--updatedWithin__variable').hide(); $('.slider--updatedWithin__label').show(); } else{ $('.slider--updatedWithin__label').hide(); $('.slider--updatedWithin__variable').show(); }
});
/* ===== / Profile Updated Within Slider ===== */
Slider - Script Codes
Slider - Script Codes
Home Page Home
Developer Adam Lowenthal
Username alowenthal
Uploaded October 12, 2022
Rating 3
Size 48,147 Kb
Views 28,336
Do you need developer help for Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Lowenthal (alowenthal) Script Codes
Name
Webster Hall Show Tickets
Dashboard Focal Tags
Google Maps Directions Sidebar
Spotify Artist Page UI
Flexbox Responsive Grid Tiles
Responsive Flexbox Table
Mobile First Menu
Blog List -- BnC
Sheet Music Animated Notes
Agile Burndown Chart
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!