How to display current value below each element with .roundSlider()?

How to display current value below each element with .roundSlider()? - javascript

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>

Related

My bootstrap dropdown is not working and I tried everything to make it work as per my knowledge

For some reason, my dropdown menu is not working. I have already added all bootstrap CDN and files that I've found, also the jquery script is coming first, but nothing happens, I click over and over and the button doesn't work. It's an exceptional case where a table is being handled by Javascript, I don't know if this is the problem and I'm not catching it. Please, I would like to ask for some help here to make my dropdown works, thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSS BRA Automation For Unbilled</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="static/styles/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.css"> rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap-table.min.css" rel="stylesheet">
<!-- Style CSS -->
<link rel="stylesheet" href="static/styles/css/main-styles.css">
<!-- Style SCSS -->
<link rel="stylesheet" href="static/styles/scss/style.css">
</head>
<body class="main-layout">
<!-- <div class="loader_bg">
<div class="loader"><img src="static/styles/static/images/loading.gif" alt="#" /></div>
</div> -->
<header>
<div class="header_bg">
<div class="header">
<a href="index.html"><img class="logo"
src="https://i.postimg.cc/bwWpnryh/images-removebg-preview.png"
alt="#" />
</a>
</div>
<section class="banner_main">
<div class="container-fluid">
<div class="row d_flex">
<div class="text-bg">
<h1><strong>Welcome to<br/></strong> TSS BRA Automation
for Unbilled</h1>
</div>
</div>
</section>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="center">
<i class="fa-solid fa-upload"></i>
<strong>Upload your files</strong>
</div>
</div>
<div class="cardBody card-block">
<div id="message" class="d-none">
<div class="alert alert-success
alert-dismissible">
<a href="#" class="close"
data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Files uploaded.
</div>
</div>
<form method="POST" action="/"
enctype="multipart/form-data"
class="form-horizontal" id="form">
<div class="row form-group">
<div class="col-12 col-md-12">
<div class="control-group" id="fields">
<label class="control-label"
for="formFile">
Chis Ativo
</label>
<label class="control-label2"
for="formFile2">
Gis Mensal
</label>
<div class="controls">
<div class="entry_1 upload-input">
<input class="form-control "
name="file_1" type="file"
id="activeChisForm"
accept="xlsx" required>
</div>
<div class="entry_2 upload-input">
<input class="form-control"
name="file_2" type="file"
id="gisForm" accept="xlsx"
required>
</div>
</div>
<button class="submitButton"
type="submit" value="Submit"
id="bsubmit" style="--content:
'Upload';">
<div class="left"></div>
Upload
<div class="right"></div>
</button>
<a target="_blank" href="#"><svg
style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;"
viewBox="0 0 24 24"></svg></a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="cardBody card-block">
<div class="select">
<select class="form-control" id="locale">
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="pt-BR" selected>Português</option>
</select>
</div>
<div id="toolbar">
<button id="remove" class="btn btn-danger"
disabled>
Delete
</button>
</div>
<table
id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-height="100"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="true"
data-show-export="true"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, all]"
data-show-footer="true"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
data-side-pagination="server"
data-response-handler="responseHandler">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<a target=”_blank”
href="https://w3.ibm.com/w3publisher/amq2c-kaizen"><img
class="citech"
src="https://i.postimg.cc/y8qRPTs7/citechlogo.png">
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- <script src="static/styles/js/jquery-3.5.1.js"></script> -->
<script src="static/styles/js/jquery-3.6.2.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table-locale-all.min.js'"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script type="text/javascript" src="static/styles/js/script.js"></script>
<script type="text/javascript" src="static/styles/js/custom.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.js"></script>
</body>
</html>
Javascript
var $table = $('#table')
var $remove = $('#remove')
var selections = []
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1
})
return res
}
function detailFormatter(index, row) {
var html = []
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
})
return html.join('')
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-trash"></i>',
'</a>'
].join('')
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row))
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
})
}
}
function totalTextFormatter(data) {
return 'Total'
}
function totalNameFormatter(data) {
return data.length
}
function totalPriceFormatter(data) {
var field = this.field
return '$' + data.map(function (row) {
return +row[field].substring(1)
}).reduce(function (sum, i) {
return sum + i
}, 0)
}
function initTable() {
$table.bootstrapTable('destroy').bootstrapTable({
height: 550,
locale: $('#locale').val(),
columns: [
[{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}],
[{
field: 'name',
title: 'Item Name',
sortable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
clickToSelect: false,
events: window.operateEvents,
formatter: operateFormatter
}]
]
})
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
selections = getIdSelections()
})
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args)
})
$remove.onClick(function () {
var ids = getIdSelections()
$table.bootstrapTable('remove', {
field: 'id',
values: ids
})
$remove.prop('disabled', true)
})
}
$(function () {
initTable()
$('#locale').onChange(initTable)
})

Use this CDN for Datatable it will work perfect
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css

How can i apply .roundSlider() to all elements of Array?

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>

How to get values from jquery range slider

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)

JQuery ui Slider is not working with duplicate

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

Getting value of textbox onchange in javascript

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<input type="text" value="" id="rateToPost"/>
<script type="text/javascript">
var my = document.getElementById("rateToPost").onchange();
alert(my);
</script>
<div style="width:75px;height:48px;">
<div style="width: 5px;margin-left: 10px;">1</div>
<div style="width: 5px;margin-left: 38px;margin-top: -10px;">2</div>
<div style="width: 5px;margin-left: 70px;margin-top: -13px;">3</div>
<div style="width: 5px;margin-left: 98px;margin-top: -12px;">4</div>
<div style="width: 5px;margin-left: 124px;margin-top: -12px;">5</div>
</div>
<script>
$(document).ready(function() {
$("#slider").slider({
range: "min",
value: 2,
min: 1,
max: 5,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#ratingResult" ).text( ui.value );
},
//this updates the value of your hidden field when user stops dragging
change: function(event, ui) {
$('#rateToPost').attr('value', ui.value);
}});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
In the above script I used a slider for rating. But what is the problem here is I have to fetch the text box value onchange and highlight the corresponding rating number background. But I cant fetch the value. Anyone can help to solve thisproblem. Thanks in advance

Try this using jQuery:
$('#rateToPost').on("change", function () {
alert($(this).val());
});

Since $('#rateToPost') is a form element: Use the val() method.

assign value: $('#rateToPost').val(ui.value);
read value: var res = $('#rateToPost').val();

$('#rateToPost').keyup(function(){
$('#slider').slider({value: this.value});
});
Demo http://jsbin.com/azosab/2/edit

Develop Reference

JavaScript is the programming language of the Web.

How to display current value below each element with .roundSlider()? - javascript

Related

My bootstrap dropdown is not working and I tried everything to make it work as per my knowledge

How can i apply .roundSlider() to all elements of Array?

How to get values from jquery range slider

JQuery ui Slider is not working with duplicate

Getting value of textbox onchange in javascript

Categories

Resources