With one element all right, but here throwing error "el.roundSlider is not a function", Jquery connected before main js file, With Jquery .each the same thing
const scArr = Array.from($('.slider'));
scArr.forEach(el => el.roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
$(el) seems to do the trick:
const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
Each element inside of a jquery array isn't a jquery object, it's actually a node element I believe. Try this in your browser: $('p')[0] instanceof Element
Just use the jquery class selector directly
$('.slider').roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
Related
When i change the value in one slider, it updates in all at the same time, how can i fix it? BY the way, i want to get value from element with current index of array and use it, is that possible, or exist better solution?
const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200,
update: function (args) {
$('.value').html(`${args.value} %`);
}
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="container">
<div class="slider"></div>
<div class="value">0 %</div>
</div>
<div class="container">
<div class="slider"></div>
<div class="value">0 %</div>
</div>
The reason for the value getting update in all element is, the generic selector was used $('.value') which will update in all elements. Instead of that you can update the element based on the current target.
Also to set the value from the element, you can get the value and apply that. Check the below modified demo:
const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
width: 10,
min: 0,
max: 200,
svgMode: true,
value: $(el).attr("data-value"),
valueChange: function (args) {
var slider = args.control;
slider.parent().find('.value').html(`${args.value} %`);
}
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="container">
<div class="slider" data-value="50"></div>
<div class="value">0 %</div>
</div>
<div class="container">
<div class="slider" data-value="120"></div>
<div class="value">0 %</div>
</div>
I trying to use slider revolution provided by Themepunch on my website (developed in Angular 8) with dynamic data that is coming for a JSON file. Therefore, I have required CSS and js files in the index.html like this
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Css Files-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/all.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
//Here is the css files
<link href="assets/css/rs-plugin/css/settings.css" rel="stylesheet">
<link href="assets/css/rs-plugin/css/navigation.css" rel="stylesheet">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/css/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<!-- js Files -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.smartmenus.js"></script>
<script src="assets/js/jquery.smartmenus.bootstrap-4.js"></script>
// Here is the js files
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
And I use a component to show the slider as a banner. In that component I use asyc call to get the json from the json file and update the array and in the component HMTL I use ngFor loop it bind the array data. However, the silder is not showing any data bacause of the ngFor and if I remove it, then the data will show.
Here is the typescript code
#Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
constructor(private file: FileService, public translate: TranslateService) { }
#Input() entity: string;
#Input() site;
main_banner: any[] = [];
revSlider: any;
ngAfterViewInit() {
this.initRevolutionSlider();
}
ngOnInit() {
this.file.get(0, 'main_banner').then(r => {
this.main_banner = r;
});
}
get lang(): string {
return this.translate.currentLang == 'ar' ? '_ar' : '_en';
}
identify(index, item) {
return index;
}
counter: number = 0;
initRevolutionSlider() {
if ($('#revolutionSlider').get(0)) {
this.revSlider = $('#revolutionSlider').show().revolution({
sliderType: 'standard',
sliderLayout: 'fullscreen',
delay: 9000,
responsiveLevels: [4096, 1200, 992, 576],
gridwidth: [1100, 920, 680, 500],
gridheight: 740,
disableProgressBar: 'on',
spinner: 'spinner3',
parallax: {
type: "on",
levels: [20, 40, 60, 80, 100],
origo: "enterpoint",
speed: 400,
bgparallax: "on",
disable_onmobile: "off"
},
navigation: {
arrows: {
enable: true
}
},
});
}
}
}
and here is the HTML
<div class="rev_slider_wrapper fullscreen-container">
<div id="revolutionSlider" class="rev_slider fullscreenbanner" data-version="5.4.8" >
<ul>
<li data-transition="fade" *ngFor="let n of main_banner;trackBy:identify;">
<img *ngIf="n.banner" src="{{n.banner}}"
alt=""
data-bgposition="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat"
data-kenburns="on"
data-duration="20000"
data-ease="Linear.easeNone"
data-scalestart="110"
data-scaleend="100"
data-offsetstart="250 100"
class="rev-slidebg" />
<h1 class="tp-caption font-weight-bold text-color-light text-center text-white"
data-x="center"
data-y="center" data-voffset="['-70','-70','-70','-70']"
data-width="['770','770','770','350']"
data-start="1000"
data-paddingtop="['11','11','11','16']"
data-paddingbottom="['11','11','11','16']"
data-fontsize="['50','50','45','35']"
data-lineheight="['56','56','50','40']"
data-transform_in="y:[100%];opacity:0;s:500;"
data-transform_out="opacity:0;s:500;"
style="white-space: normal;">
{{n.name_en}}
</h1>
</li>
</ul>
</div>
</div>
Thanks in advance
I wasn't able to figure out why *ngFor was not working, but I found a work around by following these steps:
Clear everything inside the slider 'ul' and give it an id='rev_slider_ul'
<!--Slider-->
<div class="rev_slider_wrapper">
<div id="rev_slider" class="rev_slider" data-version="5.0">
<ul id="rev_slider_ul">
</ul>
</div>
</div>
Import jquery in .ts file.
declare var jQuery: any;
Define a method to load the slider with configurations
loadSlider(){
return jQuery("#rev_slider").show().revolution({
sliderType: "standard",
sliderLayout: "fullwidth",
scrollbarDrag: "true",
navigation: {
arrows: {
enable: true
},
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
},
gridwidth: 1170,
gridheight: 770
});
}
Iterate the object you needed to iterate in ts and form a HTML string with it or keep appending to the slider element.
data.forEach((elem)=>{
jQuery("#rev_slider_ul").append(${elem})
});
Outside and after the forEach loop, load the slider
this.loadSlider()
Hope that helps. Don't see much to explain here, but open to questions if any.
I'm using ui jquery slider, but i'm not able to get the value.
$("#ex1").slider({
value: 1400,
min: 1400,
max: 12000,
step: 20,
slide: function(event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#ex1').slider('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input id="ex1" data-slider-id='ex1Slider' type="range" data-slider-min="1400" data-slider-max="12000" data-slider-step="20" data-slider-value="0" /><b class="price-left">
<span id="slider-value"></span>
Can anyone help me with this?
Your issue is because you're instantiating the slider() on a input type="range" element. It should be used with a plain div. Change that and the rest of your code works fine:
$("#ex1").slider({
value: 1400,
min: 1400,
max: 12000,
step: 20,
slide: function(event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#ex1').slider('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div id="ex1" data-slider-id='ex1Slider' data-slider-min="1400" data-slider-max="12000" data-slider-step="20" data-slider-value="0"></div>
<span id="slider-value"></span>
The slider documentation has full explanations of all other methods and properties you can use.
$('#ex1').slider("option", "value");
You can try this one (y)
We have using JQuery ui Slider but after clone it we had faced these matters
New cloned slider not sliding !!
When input value changed, All of sliders not sliding and background not changed !!
You can see a live example here
https://jsfiddle.net/earngate/ohfco7zn/1/
HTML
<!-- HTML Code -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="entry" class="markup scoreSlide">
<input type="text" id="" class="scoreID" value="3" />
<div class="scoreSlider"></div> <p />
</div>
<input type="button" id="btnAdd" value="add new slider">
Javascript
$(window).load(function(){
jQuery(".scoreSlide").each(function(){
jQuery(this).find('.scoreSlider').slider({
animate: true,
range: "min",
value: jQuery('.scoreID').val(),
min: 1,
max: 10,
step: 1,
slide: function(event, ui) {
$(this).parent().find('.scoreID').val(ui.value);
}
});
});
$('#btnAdd').click(function () {
$(".scoreSlide:last").clone(true,true).insertBefore(this);
});
});//]]>
You have to reuse the slide function when you click the button.
https://jsfiddle.net/ooxwtyog/
function sliding(){
jQuery(".scoreSlide").each(function(){
jQuery(this).find('.scoreSlider').slider({
animate: true,
range: "min",
value: jQuery('.scoreID').val(),
min: 1,
max: 10,
step: 1,
slide: function(event, ui) {
$(this).parent().find('.scoreID').val(ui.value);
}
});
});
}
clone option is to copy events as well.
additional changes are required to apply element to the parts applying slider.
https://api.jquery.com/clone/#clone-withDataAndEvents
I try run justgage example using asp net, but i get error: "No element with id: gauge found ". ID is correct, so what is wrong.
<script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gauge" class="200x160px"></div>
</form>
</body>
</html>
We ran into the same issue. The problem is that the script is being executed before the page is loaded. There are two possible solutions to that:
1.) Put the script below the <div>
...
<body>
<form id="form1" runat="server">
<div id="gauge" class="200x160px"></div>
</form>
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
</script>
</body>
2.) Tell the script to load after the window finished loading using window.onload
<script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
window.onload= function(){
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
};
</script>
</head>
...
Either should do the trick.