Mixing
Customize jQuery UI slider with 4 different range
I would like to customize my jQuery slider according to my needs.
I made for the moment :
$('#flat-slider').slider({
range: true,
values: [30, 100],
min: 0,
max: 100,
slide: function(event, ui) {
if(ui.value > 75 && ui.value <= 100){
return false;
}
if(ui.value >= 0 && ui.value <= 25){
return false;
}
}
});.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
border-radius: 0;
}
.flat-slider.ui-slider {
border: 0;
background: #9c27b0;
border-radius: 7px;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
}
.flat-slider.ui-slider-vertical {
height: 15em;
width: 3px;
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: #9c27b0;
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -7.5px;
}
.flat-slider.ui-slider-vertical .ui-slider-handle {
left: 50%;
margin-left: -7.5px;
}
.ui-slider-handler:last-child{
display:none !important;
background-color:red;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #D4B056;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
.flat-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 3px;
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="flat-slider" id="flat-slider"></div>I expect to have something like this:
For the moment I'm stuck to hide the second handler and to determine the range 1 and 2. If I hide the second handler, I can't move the first one. I don't know if it's possible to define my range.
The result is different on jsfiddle
http://jsfiddle.net/myLpqrxw/5/
EDIT :
I made up this :
http://jsfiddle.net/myLpqrxw/11/
I need to change color of the disabled range [0, 172] and [400, 500]
jquery css jquery-ui slider
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
add a comment |
I would like to customize my jQuery slider according to my needs.
I made for the moment :
$('#flat-slider').slider({
range: true,
values: [30, 100],
min: 0,
max: 100,
slide: function(event, ui) {
if(ui.value > 75 && ui.value <= 100){
return false;
}
if(ui.value >= 0 && ui.value <= 25){
return false;
}
}
});.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
border-radius: 0;
}
.flat-slider.ui-slider {
border: 0;
background: #9c27b0;
border-radius: 7px;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
}
.flat-slider.ui-slider-vertical {
height: 15em;
width: 3px;
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: #9c27b0;
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -7.5px;
}
.flat-slider.ui-slider-vertical .ui-slider-handle {
left: 50%;
margin-left: -7.5px;
}
.ui-slider-handler:last-child{
display:none !important;
background-color:red;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #D4B056;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
.flat-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 3px;
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="flat-slider" id="flat-slider"></div>I expect to have something like this:
For the moment I'm stuck to hide the second handler and to determine the range 1 and 2. If I hide the second handler, I can't move the first one. I don't know if it's possible to define my range.
The result is different on jsfiddle
http://jsfiddle.net/myLpqrxw/5/
EDIT :
I made up this :
http://jsfiddle.net/myLpqrxw/11/
I need to change color of the disabled range [0, 172] and [400, 500]
jquery css jquery-ui slider
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
I am a bit confused by the purpose, yet it seems you are asking about how to style the bar? Could you clarify.
– Twisty
Nov 20 '18 at 17:30
add a comment |
I would like to customize my jQuery slider according to my needs.
I made for the moment :
$('#flat-slider').slider({
range: true,
values: [30, 100],
min: 0,
max: 100,
slide: function(event, ui) {
if(ui.value > 75 && ui.value <= 100){
return false;
}
if(ui.value >= 0 && ui.value <= 25){
return false;
}
}
});.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
border-radius: 0;
}
.flat-slider.ui-slider {
border: 0;
background: #9c27b0;
border-radius: 7px;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
}
.flat-slider.ui-slider-vertical {
height: 15em;
width: 3px;
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: #9c27b0;
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -7.5px;
}
.flat-slider.ui-slider-vertical .ui-slider-handle {
left: 50%;
margin-left: -7.5px;
}
.ui-slider-handler:last-child{
display:none !important;
background-color:red;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #D4B056;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
.flat-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 3px;
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="flat-slider" id="flat-slider"></div>I expect to have something like this:
For the moment I'm stuck to hide the second handler and to determine the range 1 and 2. If I hide the second handler, I can't move the first one. I don't know if it's possible to define my range.
The result is different on jsfiddle
http://jsfiddle.net/myLpqrxw/5/
EDIT :
I made up this :
http://jsfiddle.net/myLpqrxw/11/
I need to change color of the disabled range [0, 172] and [400, 500]
jquery css jquery-ui slider
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
I would like to customize my jQuery slider according to my needs.
I made for the moment :
$('#flat-slider').slider({
range: true,
values: [30, 100],
min: 0,
max: 100,
slide: function(event, ui) {
if(ui.value > 75 && ui.value <= 100){
return false;
}
if(ui.value >= 0 && ui.value <= 25){
return false;
}
}
});.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
border-radius: 0;
}
.flat-slider.ui-slider {
border: 0;
background: #9c27b0;
border-radius: 7px;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
}
.flat-slider.ui-slider-vertical {
height: 15em;
width: 3px;
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: #9c27b0;
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -7.5px;
}
.flat-slider.ui-slider-vertical .ui-slider-handle {
left: 50%;
margin-left: -7.5px;
}
.ui-slider-handler:last-child{
display:none !important;
background-color:red;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #D4B056;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
.flat-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 3px;
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="flat-slider" id="flat-slider"></div>I expect to have something like this:
For the moment I'm stuck to hide the second handler and to determine the range 1 and 2. If I hide the second handler, I can't move the first one. I don't know if it's possible to define my range.
The result is different on jsfiddle
http://jsfiddle.net/myLpqrxw/5/
EDIT :
I made up this :
http://jsfiddle.net/myLpqrxw/11/
I need to change color of the disabled range [0, 172] and [400, 500]
$('#flat-slider').slider({
range: true,
values: [30, 100],
min: 0,
max: 100,
slide: function(event, ui) {
if(ui.value > 75 && ui.value <= 100){
return false;
}
if(ui.value >= 0 && ui.value <= 25){
return false;
}
}
});.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
border-radius: 0;
}
.flat-slider.ui-slider {
border: 0;
background: #9c27b0;
border-radius: 7px;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
}
.flat-slider.ui-slider-vertical {
height: 15em;
width: 3px;
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: #9c27b0;
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -7.5px;
}
.flat-slider.ui-slider-vertical .ui-slider-handle {
left: 50%;
margin-left: -7.5px;
}
.ui-slider-handler:last-child{
display:none !important;
background-color:red;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #D4B056;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
.flat-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 3px;
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="flat-slider" id="flat-slider"></div>$('#flat-slider').slider({
range: true,
values: [30, 100],
min: 0,
max: 100,
slide: function(event, ui) {
if(ui.value > 75 && ui.value <= 100){
return false;
}
if(ui.value >= 0 && ui.value <= 25){
return false;
}
}
});.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
border-radius: 0;
}
.flat-slider.ui-slider {
border: 0;
background: #9c27b0;
border-radius: 7px;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
}
.flat-slider.ui-slider-vertical {
height: 15em;
width: 3px;
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: #9c27b0;
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -7.5px;
}
.flat-slider.ui-slider-vertical .ui-slider-handle {
left: 50%;
margin-left: -7.5px;
}
.ui-slider-handler:last-child{
display:none !important;
background-color:red;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #D4B056;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
.flat-slider.ui-slider-vertical .ui-slider-range {
left: 0;
width: 3px;
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="flat-slider" id="flat-slider"></div>jquery css jquery-ui slider
jquery css jquery-ui slider
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
edited Nov 20 '18 at 15:33
executable
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
asked Nov 20 '18 at 14:32
executableexecutable
1,7222722
1,7222722
I am a bit confused by the purpose, yet it seems you are asking about how to style the bar? Could you clarify.
– Twisty
Nov 20 '18 at 17:30
add a comment |
I am a bit confused by the purpose, yet it seems you are asking about how to style the bar? Could you clarify.
– Twisty
Nov 20 '18 at 17:30
I am a bit confused by the purpose, yet it seems you are asking about how to style the bar? Could you clarify.
– Twisty
Nov 20 '18 at 17:30
I am a bit confused by the purpose, yet it seems you are asking about how to style the bar? Could you clarify.
– Twisty
Nov 20 '18 at 17:30
add a comment |
1 Answer
1
active
oldest
votes
Your goal is a little hard to grasp, yet I would do something simple with a wrapper.
Assuming you are using 100% slider, You have the following conditions:
- Cannot slide into "Not in Range" area
- Need to be able to calculate values on each side of handle
- Should visually indicate to user where values are out of ranges
Here is a simple example: http://jsfiddle.net/Twisty/z0vepxou/
HTML
<div class="slide-wrap">
<div class="flat-slider" id="flat-slider"></div>
</div>
First we create a container for our slider.
CSS
.slide-wrap {
height: 3px;
background: linear-gradient( 90deg, rgba(157, 9, 173, .45), rgba(157, 9, 173, .45) 49%, rgba(212, 176, 86, .45) 51%);
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: linear-gradient( 90deg, #9D09AD, #9D09AD 49%, #D4B056 51%);
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
background: #D4B056;
border: 0;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #9D09AD;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
Add back some of the CSS for the theme you had.
JavaScript
$(function() {
var ranges = {
trueMin: 0,
trueMax: 500,
minorMin: 172,
minorMax: 400,
start: 250,
values: [
0,
0
]
};
ranges.left = Math.round((ranges.minorMin / ranges.trueMax) * 100);
ranges.right = Math.round(100 - ((ranges.minorMax / ranges.trueMax) * 100));
$('#flat-slider').slider({
range: "min",
value: ranges.start,
min: ranges.minorMin,
max: ranges.minorMax,
slide: function(e, ui) {
var lowValue = ui.value;
var highValue = ranges.trueMax - ui.value;
ranges.values = [lowValue, highValue];
},
stop: function(e, ui) {
console.log(ranges.values);
}
}).css({
"margin-left": ranges.left + "%",
"margin-right": ranges.right + "%"
});
});
Since you are using jQuery UI 1.8.9 in the fiddle, there are some elements we cannot access easily. I wanted to force feed the array into the values and this is much better if done in jQuery UI 1.11+. For now, I created an Object to store all the various details. These could be recreated in a $.widget() if needed for many, versus just one slider.
Since the user should not be able to select a value outside of the range, why not just make than no longer a part of the slide. I created a visual background and used margins to help create the borders. So now the user can only slide in values allowed, yet can see the whole slider (in essence).
Slider works on percentages of 100%, so we need a little math to calculate the proper margins. Setting the Min and Max for Slider to just the range allowed, we can then let it do all the other work for us.
I think this should help you. Let me know.
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395287%2fcustomize-jquery-ui-slider-with-4-different-range%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your goal is a little hard to grasp, yet I would do something simple with a wrapper.
Assuming you are using 100% slider, You have the following conditions:
- Cannot slide into "Not in Range" area
- Need to be able to calculate values on each side of handle
- Should visually indicate to user where values are out of ranges
Here is a simple example: http://jsfiddle.net/Twisty/z0vepxou/
HTML
<div class="slide-wrap">
<div class="flat-slider" id="flat-slider"></div>
</div>
First we create a container for our slider.
CSS
.slide-wrap {
height: 3px;
background: linear-gradient( 90deg, rgba(157, 9, 173, .45), rgba(157, 9, 173, .45) 49%, rgba(212, 176, 86, .45) 51%);
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: linear-gradient( 90deg, #9D09AD, #9D09AD 49%, #D4B056 51%);
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
background: #D4B056;
border: 0;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #9D09AD;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
Add back some of the CSS for the theme you had.
JavaScript
$(function() {
var ranges = {
trueMin: 0,
trueMax: 500,
minorMin: 172,
minorMax: 400,
start: 250,
values: [
0,
0
]
};
ranges.left = Math.round((ranges.minorMin / ranges.trueMax) * 100);
ranges.right = Math.round(100 - ((ranges.minorMax / ranges.trueMax) * 100));
$('#flat-slider').slider({
range: "min",
value: ranges.start,
min: ranges.minorMin,
max: ranges.minorMax,
slide: function(e, ui) {
var lowValue = ui.value;
var highValue = ranges.trueMax - ui.value;
ranges.values = [lowValue, highValue];
},
stop: function(e, ui) {
console.log(ranges.values);
}
}).css({
"margin-left": ranges.left + "%",
"margin-right": ranges.right + "%"
});
});
Since you are using jQuery UI 1.8.9 in the fiddle, there are some elements we cannot access easily. I wanted to force feed the array into the values and this is much better if done in jQuery UI 1.11+. For now, I created an Object to store all the various details. These could be recreated in a $.widget() if needed for many, versus just one slider.
Since the user should not be able to select a value outside of the range, why not just make than no longer a part of the slide. I created a visual background and used margins to help create the borders. So now the user can only slide in values allowed, yet can see the whole slider (in essence).
Slider works on percentages of 100%, so we need a little math to calculate the proper margins. Setting the Min and Max for Slider to just the range allowed, we can then let it do all the other work for us.
I think this should help you. Let me know.
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
add a comment |
Your goal is a little hard to grasp, yet I would do something simple with a wrapper.
Assuming you are using 100% slider, You have the following conditions:
- Cannot slide into "Not in Range" area
- Need to be able to calculate values on each side of handle
- Should visually indicate to user where values are out of ranges
Here is a simple example: http://jsfiddle.net/Twisty/z0vepxou/
HTML
<div class="slide-wrap">
<div class="flat-slider" id="flat-slider"></div>
</div>
First we create a container for our slider.
CSS
.slide-wrap {
height: 3px;
background: linear-gradient( 90deg, rgba(157, 9, 173, .45), rgba(157, 9, 173, .45) 49%, rgba(212, 176, 86, .45) 51%);
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: linear-gradient( 90deg, #9D09AD, #9D09AD 49%, #D4B056 51%);
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
background: #D4B056;
border: 0;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #9D09AD;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
Add back some of the CSS for the theme you had.
JavaScript
$(function() {
var ranges = {
trueMin: 0,
trueMax: 500,
minorMin: 172,
minorMax: 400,
start: 250,
values: [
0,
0
]
};
ranges.left = Math.round((ranges.minorMin / ranges.trueMax) * 100);
ranges.right = Math.round(100 - ((ranges.minorMax / ranges.trueMax) * 100));
$('#flat-slider').slider({
range: "min",
value: ranges.start,
min: ranges.minorMin,
max: ranges.minorMax,
slide: function(e, ui) {
var lowValue = ui.value;
var highValue = ranges.trueMax - ui.value;
ranges.values = [lowValue, highValue];
},
stop: function(e, ui) {
console.log(ranges.values);
}
}).css({
"margin-left": ranges.left + "%",
"margin-right": ranges.right + "%"
});
});
Since you are using jQuery UI 1.8.9 in the fiddle, there are some elements we cannot access easily. I wanted to force feed the array into the values and this is much better if done in jQuery UI 1.11+. For now, I created an Object to store all the various details. These could be recreated in a $.widget() if needed for many, versus just one slider.
Since the user should not be able to select a value outside of the range, why not just make than no longer a part of the slide. I created a visual background and used margins to help create the borders. So now the user can only slide in values allowed, yet can see the whole slider (in essence).
Slider works on percentages of 100%, so we need a little math to calculate the proper margins. Setting the Min and Max for Slider to just the range allowed, we can then let it do all the other work for us.
I think this should help you. Let me know.
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
add a comment |
Your goal is a little hard to grasp, yet I would do something simple with a wrapper.
Assuming you are using 100% slider, You have the following conditions:
- Cannot slide into "Not in Range" area
- Need to be able to calculate values on each side of handle
- Should visually indicate to user where values are out of ranges
Here is a simple example: http://jsfiddle.net/Twisty/z0vepxou/
HTML
<div class="slide-wrap">
<div class="flat-slider" id="flat-slider"></div>
</div>
First we create a container for our slider.
CSS
.slide-wrap {
height: 3px;
background: linear-gradient( 90deg, rgba(157, 9, 173, .45), rgba(157, 9, 173, .45) 49%, rgba(212, 176, 86, .45) 51%);
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: linear-gradient( 90deg, #9D09AD, #9D09AD 49%, #D4B056 51%);
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
background: #D4B056;
border: 0;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #9D09AD;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
Add back some of the CSS for the theme you had.
JavaScript
$(function() {
var ranges = {
trueMin: 0,
trueMax: 500,
minorMin: 172,
minorMax: 400,
start: 250,
values: [
0,
0
]
};
ranges.left = Math.round((ranges.minorMin / ranges.trueMax) * 100);
ranges.right = Math.round(100 - ((ranges.minorMax / ranges.trueMax) * 100));
$('#flat-slider').slider({
range: "min",
value: ranges.start,
min: ranges.minorMin,
max: ranges.minorMax,
slide: function(e, ui) {
var lowValue = ui.value;
var highValue = ranges.trueMax - ui.value;
ranges.values = [lowValue, highValue];
},
stop: function(e, ui) {
console.log(ranges.values);
}
}).css({
"margin-left": ranges.left + "%",
"margin-right": ranges.right + "%"
});
});
Since you are using jQuery UI 1.8.9 in the fiddle, there are some elements we cannot access easily. I wanted to force feed the array into the values and this is much better if done in jQuery UI 1.11+. For now, I created an Object to store all the various details. These could be recreated in a $.widget() if needed for many, versus just one slider.
Since the user should not be able to select a value outside of the range, why not just make than no longer a part of the slide. I created a visual background and used margins to help create the borders. So now the user can only slide in values allowed, yet can see the whole slider (in essence).
Slider works on percentages of 100%, so we need a little math to calculate the proper margins. Setting the Min and Max for Slider to just the range allowed, we can then let it do all the other work for us.
I think this should help you. Let me know.
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
Your goal is a little hard to grasp, yet I would do something simple with a wrapper.
Assuming you are using 100% slider, You have the following conditions:
- Cannot slide into "Not in Range" area
- Need to be able to calculate values on each side of handle
- Should visually indicate to user where values are out of ranges
Here is a simple example: http://jsfiddle.net/Twisty/z0vepxou/
HTML
<div class="slide-wrap">
<div class="flat-slider" id="flat-slider"></div>
</div>
First we create a container for our slider.
CSS
.slide-wrap {
height: 3px;
background: linear-gradient( 90deg, rgba(157, 9, 173, .45), rgba(157, 9, 173, .45) 49%, rgba(212, 176, 86, .45) 51%);
}
.flat-slider .ui-slider-handle {
width: 15px;
height: 15px;
background: linear-gradient( 90deg, #9D09AD, #9D09AD 49%, #D4B056 51%);
border-radius: 50%;
border: none;
cursor: pointer;
}
.flat-slider.ui-slider-horizontal {
height: 3px;
background: #D4B056;
border: 0;
}
.flat-slider .ui-slider-range {
border: 0;
border-radius: 7;
background: #9D09AD;
}
.flat-slider.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 3px;
}
Add back some of the CSS for the theme you had.
JavaScript
$(function() {
var ranges = {
trueMin: 0,
trueMax: 500,
minorMin: 172,
minorMax: 400,
start: 250,
values: [
0,
0
]
};
ranges.left = Math.round((ranges.minorMin / ranges.trueMax) * 100);
ranges.right = Math.round(100 - ((ranges.minorMax / ranges.trueMax) * 100));
$('#flat-slider').slider({
range: "min",
value: ranges.start,
min: ranges.minorMin,
max: ranges.minorMax,
slide: function(e, ui) {
var lowValue = ui.value;
var highValue = ranges.trueMax - ui.value;
ranges.values = [lowValue, highValue];
},
stop: function(e, ui) {
console.log(ranges.values);
}
}).css({
"margin-left": ranges.left + "%",
"margin-right": ranges.right + "%"
});
});
Since you are using jQuery UI 1.8.9 in the fiddle, there are some elements we cannot access easily. I wanted to force feed the array into the values and this is much better if done in jQuery UI 1.11+. For now, I created an Object to store all the various details. These could be recreated in a $.widget() if needed for many, versus just one slider.
Since the user should not be able to select a value outside of the range, why not just make than no longer a part of the slide. I created a visual background and used margins to help create the borders. So now the user can only slide in values allowed, yet can see the whole slider (in essence).
Slider works on percentages of 100%, so we need a little math to calculate the proper margins. Setting the Min and Max for Slider to just the range allowed, we can then let it do all the other work for us.
I think this should help you. Let me know.
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
edited Nov 20 '18 at 20:10
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
answered Nov 20 '18 at 20:00
TwistyTwisty
13.7k11534
13.7k11534
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395287%2fcustomize-jquery-ui-slider-with-4-different-range%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I am a bit confused by the purpose, yet it seems you are asking about how to style the bar? Could you clarify.
– Twisty
Nov 20 '18 at 17:30