Forum Replies Created
-
AuthorPosts
-
domjasper
CustomerFixed! Thank you :)
domjasper
CustomerUnfortunately no success. Attached screenshot of puzzles.
Here is the slider code:
<link href=”https://refreshless.com//nouislider/dist/nouislider.css?v=1550″ rel=”stylesheet”>
<style>
/* Here you can change the root styles to suit your own brand */
:root {
–tooltip-height: 32px;
–tooltip-color: #000;
–tooltip-bg-color: #FBFCFE;
–tooltip-border-color: #E4E6F1;
–tooltip-corner-radius: 8px;
–tooltip-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);–handle-height: 24px;
–handle-width: 24px;
–handle-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);
–handle-color: #b4b4b4;–range-bar-height: 18px;
–range-bar-corner-radius: 20px;
–range-bar-color: #642EFF;
–range-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);
}/* -150% will show tool-tips at the bottom, you can swap these to top via the % amount. */
.noUi-tooltip.bottom {
bottom: 150%;
}
/* These are some styles for the range bar, for example the 2px inner-shadow. Or the corner ends */
.noUi-target {
background: #E4E6F1;
border-radius: 32px;
border: 0;
box-shadow: 0px 3px 2px -2px #1B114A14 inset;
}
.noUi-connects{
overflow: initial;
}
.noUi-connect {
background: var(–range-bar-color);
box-shadow: var(–range-box-shadow);
}.noUi-handle {
width: var(–handle-width) !important;
height: var(–handle-height) !important;
border-radius: 50%;
border: 0;
box-shadow: none;
box-shadow: var(–handle-box-shadow);
cursor: pointer;
top: -3px !important;
background: var(–handle-color);
}.noUi-handle:before,
.noUi-handle:after {
display: none
}
.noUi-horizontal{
height: var(–range-bar-height);
}
.noUi-tooltip {
height: var(–tooltip-height);
background: var(–tooltip-bg-color);
border: 1px solid var(–tooltip-border-color);
box-sizing: border-box;
box-shadow: var(–tooltip-box-shadow);
border-radius: var(–tooltip-corner-radius);
}
</style><script src=”https://refreshless.com/nouislider/dist/nouislider.js?v=1550″></script>
<script type=”text/javascript” src=”https://cdn.jsdelivr.net/jquery/latest/jquery.min.js”></script>
<script src=”https://refreshless.com/nouislider/documentation/assets/wNumb.js”></script><script>
$(function () {
//THIS IS FOR THE SINGLE SLIDER
let idOfSlider = ‘slider-single’;
let idOfSliderValue = ‘slider-single-value’;$(‘#’ + idOfSlider).css(‘display’, ‘none’);
$(““).insertAfter(‘#’ + idOfSlider);
var single = $(‘#’ + idOfSlider).next()[0];
noUiSlider.create(single, {
start: [520],
range: {
‘min’: 0.1,
‘max’: 1
},
step: 0.01,
tooltips: [
wNumb({decimals: 1.00,prefix: ”}),
],
});
var valueSingle = document.getElementById(idOfSlider);
single.noUiSlider.on(‘update’, function (values) {
$(‘#’ + idOfSlider).val(values);
$(‘#’ + idOfSliderValue).text(values);
});
$(‘[data-tooltip-pos]’).next().children().find(‘.noUi-tooltip’).addClass(‘bottom’)//THIS IS FOR THE RANGE SLIDER.
//Sorry for yelling…
let idOfRangeSlider = ‘slider-range’;$(‘#’ + idOfRangeSlider).css(‘display’, ‘none’);
$(““).insertAfter(‘#’ + idOfRangeSlider);
var range = $(‘#’ + idOfRangeSlider).next()[0];
noUiSlider.create(range, {
connect: true,
start: [10000, 18000],
range: {
‘min’: 1000,
‘max’: 20000
},
step: 500,
tooltips: [
wNumb({decimals: 2,prefix: ‘$’}),
wNumb({decimals: 2,prefix: ‘$’}),
],
});
range.noUiSlider.on(‘update’, function (values) {
$(‘#’ + idOfRangeSlider).val(values.join(‘ – ‘));
});
});</script>
Attachments:
You must be logged in to view attached files.domjasper
CustomerAwesome! Thank you very much xeon, I will give it a try.
domjasper
CustomerWill do! I did try that previously but it seemed to crash the app. Will give it another go using the documentation.
If you have any other advice or suggestions, I would love to hear them!
domjasper
CustomerThank you Yuri! All made possible by your awesome software :)
domjasper
CustomerAlso looking for a solution to this. I want to use Webflow to host my project, and have the 3D scene interact with the webflow ui. Is it possible?
domjasper
CustomerI tried embedding it via the Verge3D network, but there are issues with the paywall. Are there any tutorials on how to integrate the Verge3D App?
domjasper
CustomerYes the final solution I tried, that is attached to my post, is taken from ChatGPT. I did try the solution on that thread as well as others, however I don’t have screenshots as I edited the file multiple times to the state it is in now. I’m sure your solution works, I most likely did not apply it correctly, that’s why I asked for a reference so I could check.
I have hired a developer to do it for me now, but I appreciate your time and mapping out the solution in the other thread.
domjasper
CustomerThanks for the response! That would be awesome. It seems to be quite a highly sort after feature. I already tried the solution kdv suggested but it did not work for me.
domjasper
CustomerAppreciate it Yuri
domjasper
CustomerHi GLiFTeK, I purchased your backgrounds plugin. Unfortunately it does not work at all on the newest version of Verge3D. Are you planning to make an update?
domjasper
CustomerHello CyberFox team. Thank you for the awesome plugin!
I am having one issue, it is not possible to adjust the size of the uploaded image on touch devices. Is there a way to fix this?
TIA!
-
This reply was modified 3 months, 2 weeks ago by
domjasper.
2024-04-09 at 2:08 pm in reply to: How to change HDRI with puzzles, and use a higher resolution? #72210domjasper
CustomerThank you! Very helpful. Will give it a test.
How do you make the image emit light like an HDR would?
-
This reply was modified 3 months, 2 weeks ago by
-
AuthorPosts